designart

HTML <ul> <li><a href="">Dashboard</a></li> <li><a href="">Friends</a></li> <li> <a href="">Message <span>9</span> </a> </li> <li><a href="">Games</a></li> <li><a href="">Settings</a></li> </ul> CSS .animating{ animation: animate 1s cubic-bezier(0,1,1,0); } @keyframes animate{ from { transform: scale(1); } to { transform: scale(1.7); } } jQuery var counterValue = parseInt($('.bubble').html()); // Get the current bubble value function removeAnimation(){ setTimeout(function() { $('.bubble').removeClass('animating') }, 1000); } $('#decrease').on('click',function(){ counterValue--; // decrement $('.bubble').html(counterValue).addClass('animating'); // anima

HTML <div id="ballWrapper">      <div id="ball"></div>      <div id="ballShadow"></div> </div> CSS #ballWrapper { width: 140px; height: 300px; position: fixed; left: 50%; top: 50%; margin: -150px 0 0 -70px; } #ball { width: 140px; height: 140px; border-radius: 70px; background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; } #ball::after { content: ""; width: 80px; height: 40px; position: absolute; left: 30px; top: 10px; background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); border-radius: 40px / 20px; } #ballShadow { width: 60px; height: 75px; position: absolute; z-index: 0

Cool Animated Fire Effects with CSS3 and jQuery JQuery <script type="text/javascript"> var step = 1; function nextShadow(){ $('#onfire span').each(function(){ y = parseFloat($(this).attr("y_pos")); y += step + Math.random()*3; $(this).attr("y_pos", y); shaking = Math.random(); shadow1 = "0px 0px "+(y%5)+"px white"; shadow2 = shaking*24/y*Math.cos(y/5)*15+"px -"+(shaking*4/y+(y%17))+"px "+(shaking+(y%17))+"px red"; shadow3 = shaking*24/y*Math.cos(y/7)*15+"px -"+(shaking*4/y+(y%31))+"px "+(shaking+(y%31))+"px #993"; shadow4 = shaking*24/y*Math.cos(y/13)*15+"px -"+(shaking*4/y+(y%41))+"px "+(shaking+(y%41))+"px yellow"; $(this).css("text-shadow", shadow2+", "+shadow1+", "+shadow4+", "+shadow3); }); } $(function(){ $('#onfire span')