CSS3实现360度循环旋转功能
这篇文章主要介绍了CSS3实现360度循环旋转功能,整个div360度旋转，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1.整个div360度旋转
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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内的文字不动，底边的图片旋转
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <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度循环旋转的文章就介绍到这了