CSS3实现360度循环旋转
生活随笔
收集整理的這篇文章主要介紹了
CSS3实现360度循环旋转
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.整個(gè)div360度旋轉(zhuǎn)
<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">旋轉(zhuǎn)吧</div>效果圖：
2.div內(nèi)的文字不動(dòng)，底邊的圖片旋轉(zhuǎn)
<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>效果
總結(jié)
以上是生活随笔為你收集整理的CSS3实现360度循环旋转的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 基于社会工程学的网络攻击手段分析
- 下一篇： css简单画法,几种基本图形的CSS画法