网站CSS3实现360度循环旋转功能
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栏目中查看更多相关内容。
