CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能
發(fā)布時(shí)間：2022-01-25 15:36:23 作者：yb305小白 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能,整個(gè)div360度旋轉(zhuǎn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
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>
效果
到此這篇關(guān)于CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)的文章就介紹到這了,更多相關(guān)CSS3 循環(huán)旋轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效
這篇文章主要介紹了css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可2021-04-29
css3 實(shí)現(xiàn)圓形旋轉(zhuǎn)倒計(jì)時(shí)
這篇文章主要介紹了css3 實(shí)現(xiàn)圓形旋轉(zhuǎn)倒計(jì)時(shí)功能,需要的朋友可以參考下2018-02-24
CSS3實(shí)現(xiàn)頭像旋轉(zhuǎn)效果
本篇文章主要介紹了CSS3實(shí)現(xiàn)頭像旋轉(zhuǎn)效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-13純CSS3制作的鼠標(biāo)懸停時(shí)邊框旋轉(zhuǎn)
本文給大家分享一段css3代碼實(shí)現(xiàn)鼠標(biāo)懸停時(shí)邊框旋轉(zhuǎn)的效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-03
CSS3使用雙旋轉(zhuǎn)實(shí)現(xiàn)福到了的迎春喜慶特效代碼
春節(jié)快到了，因?yàn)橐咔橐呀?jīng)好久沒有回老家了，今年終于可以回家過年了，我已經(jīng)抑制不住自己激動(dòng)的心情了。因此，我利用css3的旋轉(zhuǎn)做了一個(gè)福到了的特效，而且是雙旋轉(zhuǎn)，感興2023-01-29
