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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知