代码
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> .tile2 span { animation-name: donghua2; animation-duration: 0.2s; animation-iteration-count: 1; animation-timing-function: linear; } @keyframes donghua2 { 0% { transform: rotateX(0deg) skewX(0deg); } 25% { transform: rotateX(90deg) skewX(10deg); } 26% { transform: rotateX(90deg) skewX(-10deg); } 50% { transform: rotateX(0deg) skewX(0deg); } 75% { transform: rotateX(-30deg) skewX(4deg); } 100% { transform: rotateX(0deg) skewX(0deg); } } </style> <script src="JQuery 1.7.2/jquery-1.7.2.js"></script> <script> $(function () { $("#btn1").click(function () { $("#tile span").text(parseInt($("#tile span").text()) + 1); $("#tile").addClass("tile2"); setTimeout(function () { $("#tile").removeClass("tile2"); }, 300); }); }); </script> </head> <body> <div id="tile" style="background-color:#007acc;80px;height:80px;font-size:40px;text-align:center;color:white;line-height:80px;"> <span>0</span> </div> <input id="btn1" type="button" value="+1" /> </body> </html>