jQuery+CSS3+HTML5催眠的怀表摇摆动画
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<div class="clok">
<div class="circle">
<div class="circlecenter"></div>
<div class="miaozhen"></div>
<div class="fenzhen"></div>
<div class="shizhen"></div>
</div>
</div>
4、书写css代码。
<style>
* { margin: 0; padding: 0; }
body { 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-repeat center; background-size: 100% 100%; z-index: 5; }
.shizhen { width: 16px; height: 38px; background: url(img/shizhen.png) center no-repeat; background-size: 100% 100%; position: absolute; left: 64px; top: 34px;}
</style>
5、书写并添加js代码。
<script src="js/jquery.js"></script>
<script>
var ad=$('audio')[0];
ad.play();
setInterval(function(){
ad.play();
},1000);
var myTime=new Date();
var houre=myTime.getHours();
var minutes=myTime.getMinutes();
var seconds=myTime.getSeconds();
console.log(houre);
console.log(minutes);
console.log(seconds);
var miao=seconds;
var mz=$('.miaozhen');
setInterval(function(){
if(miao==59){
miao=0;
mz.css({
'-web kit-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({
'-web kit-transform': 'rotate('+miaodu+'deg)',
'-ms-transform': 'rotate('+miaodu+'deg)',
'-moz-transform': 'rotate('+miaodu+'deg)',
'-o-transform': 'rotate('+miaodu+'deg)',
'transform': 'rotate('+miaodu+'deg)'
})
}
},1000);
var minutesdeg=parseInt(minutes*6)+parseInt(seconds/10);
$('.fenzhen').css({
'-web kit-transform': 'rotate('+minutesdeg+'deg)',
'-ms-transform': 'rotate('+minutesdeg+'deg)',
'-moz-transform': 'rotate('+minutesdeg+'deg)',
'-o-transform': 'rotate('+minutesdeg+'deg)',
'transform': 'rotate('+minutesdeg+'deg)'
})
var houredeg=parseInt(houre%12*30)+parseInt(minutes/2);
$('.shizhen').css({
'-we bkit-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、查看效果。
