使用CSS3实现WP8跳动的数字 [IE10] 其他浏览器 自行修改CSS3前缀
代码
<!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;width: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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步