HTML+CSS3 旋转齿轮特效_html 3d齿轮

作者：weixin_40725706 | 2024-02-16 21:27:03

踩

html 3d齿轮

前期准备

position: relative;
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

position: absolute;
生成相对定位的元素，相对于其正常位置进行定位。

@keyframes
@keyframes 动画名（持续时间百分比{css样式属性}）
动画名：必须要有
百分比合法值（必须要有）：
0-100%
from (和0%相同)
to (和100%相同)

animation
将动画属性绑定到相应的html元素上

transform:translateZ(z);
进行3D转换，以z轴为中心进行旋转，括号里写具体旋转的度数

注意： 关于@keyframes,animation,transfrom属性更详细的介绍我在前面已经讲过，地址：https://blog.csdn.net/weixin_44592738/article/details/103222753

思路：

完成页面静态布局
确定相应齿轮的旋转方向
设置瞬时间动画，逆时针动画和水滴动画
运行代码

代码

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>html5+css3 齿轮滚动动画特效 </title>
	<link rel="stylesheet" href="css/css.css">
</head>
	<body>
		<div class="back">
			<div class="content">
				<div class="img1"></div>
				<div class="img2"></div>
				<div class="img3"></div>
				<div class="img4"></div>
				<div class="img5"></div>
				<div class="img6"></div>
				<div class="img7"></div>
				<div class="img8"></div>
				<div class="img9"></div>
				<div class="img10"></div>
				<div class="img11"></div>
			</div>
		</div>
	</body>
</html>

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

css:

*{
	margin: 0;
	padding: 0;
}
body,html{
	height: 100%;
}
/* 设置背景 */
.back{
	height: 100%;
	background: url("../images/bg_03.jpg") no-repeat center;
}
/* 对包含所有图片的div进行相对定位 */
.content{
	height:787px;
	width: 800px;
	position: relative;
	margin: 0 auto;
}
/* 对所有图片进行绝对定位 */
.content div{
	position: absolute;
}
/* 水滴 */
.img1{
	height: 50px;
	width: 50px;
	top: 191px;
    left: 391px;
	background: url("../images/icon-1.png") no-repeat center; 
	animation:water 2s ease-in-out infinite;
}

/* 左边第一大 */
.img7{
	height: 252px;
    width: 242px;
    top: 87px;
    left: 54px;
	background: url("../images/icon-7.png") no-repeat center;
}
/* 左边第二大 */
.img4{
	height: 148px;
    width: 144px;
    top: 203px;
    left: 272px;
	background: url("../images/icon-4.png") no-repeat center;
}
/* 左边最小 */
.img2{
	height: 75px;
    width: 73px;
    top: 103px;
    left: 4px;
	background: url("../images/icon-2.png") no-repeat center;
}
/* 左边身体的手 */
.img8{
	height: 50px;
    width: 50px;
    top: 286px;
    left: 268px;
	background: url("../images/icon-8.png") no-repeat center;
}
/* 右边第一大 */
.img6{
	height: 214px;
    width: 194px;
    top: 96px;
    left: 455px;
	background: url("../images/icon-6.png") no-repeat center;
}
/* 右边第二大 */
.img3{
	height: 116px;
    width: 121px;
    top: 54px;
    left: 600px;
	background: url("../images/icon-3.png") no-repeat center;
}
/* 右边最小 */
.img5{
	height: 117px;
    width: 112px;
    top: 245px;
    left: 403px;
	background: url("../images/icon-5.png") no-repeat center;
}
/* 右边男手 */
.img9{
	height: 50px;
    width: 50px;
    top: 310px;
    left: 513px;
	background: url("../images/icon-9.png") no-repeat center;
}
/* 右边女手 */
.img10{
	height: 50px;
    width: 50px;
    top: 242px;
    left: 619px;
	background: url("../images/icon-10.png") no-repeat center;
}
/* 人物背景 */
.img11{
	height: 709px;
    width: 788px;
    bottom: -2px;
	background: url("../images/img.png") no-repeat center;

}
/* img2,img4,img6 顺时针 */
.img2,.img4,.img6{
	animation:rotate1 8s ease-in-out infinite;
}
/* img3,img5,img7 逆时针 */
.img3,.img5,.img7{
	animation:rotate2 8s ease-in-out infinite;
}


/* 动画 顺时针 以Z轴为中心*/
@keyframes rotate1{
	0%{
		transform:rotateZ(0deg);
	}
	100%{
		transform:rotateZ(360deg);
	}
}

/* 动画 逆时针 以Z轴为中心*/
@keyframes rotate2{
	0%{
		transform:rotateZ(0deg);
	}
	100%{
		transform:rotateZ(-360deg);
	}
}

/* 动画 水滴效果 */
@keyframes water{
	0%{
		/*变透明*/
		opacity: 0;
	}
	100%{
		/*向下移动*/
		top:600px;
	}
}
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

运行效果

在这里插入图片描述

总结

在编写代码中因transform写成了transfrom,导致程序运行出错
在设置背景时，一定要设置相应的宽和高，否则内容显示不出来
img标签和background-image的区别是：img是标签,代表文档内容，background-image是属性，代表样式设计。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/96827