CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能

發(fā)布時(shí)間：2022-01-25 15:36:23 作者：yb305小白

這篇文章主要介紹了CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能,整個(gè)div360度旋轉(zhuǎn)，本文通過(guò)實(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)文章，希望大家以后多多支持腳本之家！