您当前所在位置：首页

CSS3实现360度循环旋转功能

[db:来源] yb305小白2022-01-25
Warning: Illegal string offset 'id' in /home/wwwroot/cczh004/wwwroot/show.php on line 80

Notice: Uninitialized string offset: 0 in /home/wwwroot/cczh004/wwwroot/show.php on line 80

Warning: Illegal string offset 'classname' in /home/wwwroot/cczh004/wwwroot/show.php on line 81

Notice: Uninitialized string offset: 0 in /home/wwwroot/cczh004/wwwroot/show.php on line 81
3338

这篇文章主要介绍了CSS3实现360度循环旋转功能,整个div360度旋转，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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>

效果