|
含倒计时的爆炸特效代码： <style> .content{ width: 500px; margin:0 auto; } .content .img1{ animation: zhazha 1s infinite; } .content .img2 { animation: boom 1s 1; } @keyframes zhazha{ from{ transform: scale(0.8); }to{ transform: scale(1.1); } } @keyframes boom{ from{ transform: scale(0); }to{ transform: scale(1); } } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/boom.js"></script> </head> <body> <input type="button" class="btn" value="炸了炸了" /> <div class="content"> <p class="boom"></p> <img class="img1" src="img/boom.jpg"/> <img class="img2" src="img/booms.jpg"/> </div> <script> $(function(){ $(".content").hide(); $(".btn").click(function(){ var time=3; var set=setInterval(function(){ if(time>0){ $(".boom").text(time-- +"s"); $(".content").show(); $(".content .img2").hide(); }else{ $(".content .img1,p").hide(); $(".content .img2").show(); } },1000); }) }) </script> 原作者：辣子倩
|
|
|
来自： 昵称47052376 > 《程序员》
