首页 > 代码库 > 风车360度旋转特效css3
风车360度旋转特效css3
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
风车360度旋转特效css3
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。