网站CSS3实现360度循环旋转功能
2年前 (2024-03-05)CSS3.1k
复制本页网址打印
1.整个div360度旋转
<style type="text/css"> .div3 { position:absolute; z-index:3; left:40px; top:40px; font-weight:bold; background:red; animation: myfirst2 15s infinite linear; } @keyframes myfirst2 { from {transform: rotate(0deg);} to {transform: rotate(359deg);} } @keyframes myfirst { from {transform: rotate(0deg);} to {transform: rotate(-359deg);} } </style> <div class="div3">旋转吧</div> 效果图：
2.div内的文字不动，底边的图片旋转
<html> <head> <style type="text/css"> body { background:#000a2d; } .div2 { position:absolute; z-index:2; left:40px; top:40px; font-weight:bold; height:400px; width:400px; animation: myfirst2 15s infinite linear; } .div3 { position:absolute; z-index:3; left:11%; top:22%; font-weight:bold; color:#fff; background:red; } @keyframes myfirst2 { from {transform: rotate(0deg);} to {transform: rotate(359deg);} } @keyframes myfirst { from {transform: rotate(0deg);} to {transform: rotate(-359deg);} } </style> </head> <body> <div class="div3">最上层</div> <div class="div2"><img src="./centerBg3.png" style="width:100%;height:100%;"></div> </body> </html> 效果
如果网站CSS3实现360度循环旋转功能没有解决您的问题，您还可以在CSS栏目中查看更多相关内容。
赞0
打赏
重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们反馈，我们将尽快与您互动，谢谢支持！