纯css实现循环动画 矫情吗；* 2023-07-17 04:41 4阅读 0赞 > 面试时遇到了一个问题，利用css，写一个元素从左到右然后到左一直循环的动画； 先看效果： ![20200319152652749.gif][] > 说一下大体的思路，利用了自定义动画和infinite属性（这个属性确实忘了，也从正面反应了我好多东西还没记住），通过百分比去控制运动的轨迹，50%的时候就是最右边的时刻。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .block{ position: absolute; width: 100px; height: 100px; background-color: red; animation: box 3s infinite; } @keyframes box{ 0% {left:0px} 50%{left: 500px;} 100%{left: 0px;} } </style> </head> <body> <div class="block"></div> </body> </html> END [20200319152652749.gif]: /images/20230528/22cb7c887d50498eb3006d493733ae11.png
还没有评论，来说两句吧...