本文主要是介绍html5 css3做圆周运动,css3实现圆周运动效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
css3新增了transform和animation等新的样式，也可以用来做圆周运动。transform里面有一个变形函数是rotate，这时就需要使用逆向思维。元素本身并不发生运动，而是轨道自身在旋转，会实现视觉上的圆周运动效果html>
body {
margin-top: 100px;
}
@keyframes rotate1{
100%{transform:rotate(360deg);}
}
@keyframes rotate2{
100%{transform:rotate(-360deg);}
}
#backup{
height: 298px;width:298px;border:1px solid black;border-radius:50%;position:absolute;top:180px;left:50px;
}
#test{
height: 40px;width: 40px;background-color:darkcyan;position:relative;left:130px;top:280px;border-radius:50%
}
顺时针旋转
逆时针旋转
暂停
还原
reset.onclick = function(){
history.go();
}
btn1.onclick = function(){
backup.style.animation= 'rotate1 4s infinite linear';
}
btn2.onclick = function(){
backup.style.animation= 'rotate2 4s infinite linear';
}
btn3.onclick = function(){
backup.style.animationPlayState = 'paused';
}
这篇关于html5 css3做圆周运动,css3实现圆周运动效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
