1 <style> 2 #box{ 3 width: 220px; 4 height: 220px; 5 position: absolute; 6 margin: 300px; 7 transform-origin: center center;//以图形中心为旋转原点 8 animation: anima 1s linear infinite;//永远以1秒匀速执行动画 9 } 10 @keyframes anima{//动画帧 11 0%{ 12 transform:rotate(0deg) 13 14 } 15 25%{ 16 transform: rotate(90deg); 17 } 18 50%{ 19 transform: rotate(180deg); 20 } 21 75%{ 22 transform:rotate(270deg); 23 } 24 100%{ 25 transform: rotate( 360deg ); 26 } 27 } 28 </style>
1 <body> 2 <div id="box"><img src="1.png" alt=""></div> 3 </body>
参考图片:
1.png
时间: 2024-10-03 14:01:59