css3实现圆周运动效果
css3新增了transform和animation等新的样式，也可以用来做圆周运动。transform里面有一个变形函数是rotate，这时就需要使用逆向思维。元素本身并不发生运动，而是轨道自身在旋转，会实现视觉上的圆周运动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
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%
}
</style>
</head>
<body>
<button id="btn1">顺时针旋转</button>
<button id="btn2">逆时针旋转</button>
<button id="btn3">暂停</button>
<button id="reset">还原</button>
<div id="result"></div>
<div id="backup">
<div id="test"></div>
</div>
<script>
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';
}
</script>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7043.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
