jQuery+CSS3+HTML5催眠的怀表摇摆动画
工具/原料
adobedreamweaver
方法/步骤
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<divclass="clok"><divclass="circle"><divclass="circlecenter"></div><divclass="miaozhen"></div><divclass="fenzhen"></div><divclass="shizhen"></div></div></div>
4、书写css代码跷孳岔养。<style>*{margin:0;padding:0;}bo颊俄岿髭dy{background:#000;}.circlecenter{position:absolute;left:50%;top:50%;margin-left:-6px;margin-top:-6px;width:12px;height:12px;background:url(img/3.png)no-repeatcenter;background-size:100%100%;z-index:5;}.shizhen{width:16px;height:38px;background:url(img/shizhen.png)centerno-repeat;background-size:100%100%;position:absolute;left:64px;top:34px;}</style>
5、书写并添加js蜣贺鱿柢代码。<scriptsrc="js/jquery.js"></script><script>va鸡堕樱陨rad=$('audio')[0];ad.play();setInterval(function(){ad.play();},1000);varmyTime=newDate();varhoure=myTime.getHours();varminutes=myTime.getMinutes();varseconds=myTime.getSeconds();console.log(houre);console.log(minutes);console.log(seconds);varmiao=seconds;varmz=$('.miaozhen');setInterval(function(){if(miao==59){miao=0;mz.css({'-webkit-transform':'rotate(0deg)','-ms-transform':'rotate(0deg)','-moz-transform':'rotate(0deg)','-o-transform':'rotate(0deg)','transform':'rotate(0deg)'})}else{miao++;miaodu=miao*6;mz.css({'-webkit-transform':'rotate('+miaodu+'deg)','-ms-transform':'rotate('+miaodu+'deg)','-moz-transform':'rotate('+miaodu+'deg)','-o-transform':'rotate('+miaodu+'deg)','transform':'rotate('+miaodu+'deg)'})}},1000);varminutesdeg=parseInt(minutes*6)+parseInt(seconds/10);$('.fenzhen').css({'-webkit-transform':'rotate('+minutesdeg+'deg)','-ms-transform':'rotate('+minutesdeg+'deg)','-moz-transform':'rotate('+minutesdeg+'deg)','-o-transform':'rotate('+minutesdeg+'deg)','transform':'rotate('+minutesdeg+'deg)'})varhouredeg=parseInt(houre%12*30)+parseInt(minutes/2);$('.shizhen').css({'-webkit-transform':'rotate('+houredeg+'deg)','-ms-transform':'rotate('+houredeg+'deg)','-moz-transform':'rotate('+houredeg+'deg)','-o-transform':'rotate('+houredeg+'deg)','transform':'rotate('+houredeg+'deg)'})</script>
6、代码整体结构。
7、查看效果。
