刚学了js的一些函数,所以做了一个太极的旋转。做完之后是上面这个样子的,是可以旋转的。
思路:
1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动。
2.画两个半圆,主要属性是border-top-right-radius: 250px; 像素值为长边的一半。
3.然后画4个圆,以基准转盘为父元素,按照下面黑色圆一样的思路再画另外一边白色的圆,最后再在两个中等的圆上画两个小圆。
4.设置定时器:
//旋转角度 var deg = 0 //设置定时器,100毫秒动一次 var tid = setInterval(function(){ var clock_dfc = document.getElementById("clock-dfc"); clock_dfc.style.transform = "rotate("+(-deg)+"deg)"; //改变转盘属性 deg -=30;//每次赚30度 },100);
5.小结:就是简单的CSS叠加出来的效果。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。