当前位置：首页 > 网页制作 > CSS > 详细页面

CSS3实现360度循环旋转功能 CSS3 循环旋转

时间：2022-02-14来源：www.pcxitongcheng.com作者：电脑系统城

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>