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