实验四 HTML5 CSS3齿轮滚动(CSS3动画、变形)_页面齿轮滚动样式

作者：Cpp五条 | 2024-02-16 21:26:25

踩

页面齿轮滚动样式

在这里插入图片描述
01.HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8"> 
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <link href="css/css.css" rel="stylesheet" type="text/css" media="all" /> 
    <title> 齿轮动画</title>  
    
 </head>  
 <body> 
		  <div class="section">
			  
			  <div class="right">
				  <div >
					  
					  <div >
						  <img src="img/icon-2.png" class="icon1"/>
					  </div>
					  
					  <div >
					  <img src="img/icon-3.png" class="icon2"/>
					  </div>
					  
					  <div >
						 <img src="img/icon-4.png"class="icon3" /> 
					  </div>
					 
					  <div >
						  <img src="img/icon-5.png" class="icon4"/>
					  </div>
					 
					  <div >
						  <img src="img/icon-6.png"class="icon5"/>
					  </div>

					  <div >
						  <img src="img/icon-7.png"class="icon6" />
					  </div>
					  <div >
					  	<img src="img/img.png"class="icon7" />
					  </div>
					  <div >
					  	<img src="img/icon-8.png"class="icon8" />
					  </div>
					  <div >
					  	<img src="img/icon-9.png"class="icon9" />
					  </div>
					  <div >
					  	<img src="img/icon-10.png"class="icon10" />
					  </div>
					  <div >
					  	<img src="img/icon1-.png"class="icon11" />
					  </div>
				  </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
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

css.css

		body,html{
			height: 100%;
		}
		/* 设置背景 */
		.section{
			height: 100%;
			background: url("../img/bg_03.jpg") no-repeat center;
		}
		
		.right{
			height:787px;
			width: 800px;
			position: relative;
			margin: 0 auto;
		}
		.right div{
			position: absolute;
		}
		/* 左边第一个 */
       .icon1 {
       			    height: 70px;
       				width: 70px;
       				/* top: 190px;
       			    left: 391px; */
					margin-top: 10px;
					margin-left: 45px;
       				
       }
	   /* 左边第2个 */
	   .icon2 {
	   			    height: 250px;
	   				width: 250px;
	   				/* top: 85px;
	   			    left: 54px; */
					margin-top: 50px;
					margin-left: 45px;
	   				
	   }
	   /* 左边第3个 */
	   .icon3 {
	   			    height: 150px;
	   				width: 145px;
	   				/* top: 200px;
	   			    left: 270px; */
					margin-top: 152px;
					margin-left: 286px;
	   				
	   }
	   /* 右边边第4个 */
	   .icon4 {
	   			    height: 110px;
	   				width: 110px;
	   				margin-top: 180px;
					margin-left: 422px;
	   				
	   }
	    /* 右边边第5个 */
	   .icon5 {
	   			    height: 190px;
	   				width: 190px;
	   				margin-top: 27px;
	   				margin-left: 480px;
	   				
	   }
	    /* 右边边第6个 */
	   .icon6 {
	   			    height: 120px;
	   				width: 120px;
	   				margin-top: 16px;
	   				margin-left: 660px;
	   				
	   }
	    /* 人物图*/
	   .icon7{
	   	height: 709px;
	    width: 788px;
	    bottom: -2px;
	   }
	   .icon8 {
	   			    
	   				    margin-top: 220px;
	   				    margin-left: 276px;
	   }
	   .icon9 {
	   			    
	   				    margin-top: 235px;
	   				    margin-left: 494px;
	   				    height: 44px;
	   				    width: 47px;
	   				
	   }
	   .icon10 {
	   			    
	   				    margin-top: 165px;
	   				    margin-left: 614px;
	   				    height: 55px;
	   				    width: 55px;
	   				
	   }
	   
	   .icon11 {
	   			    height: 50px;
	   			    	width: 50px;
	   			    	margin-top: 100px; 
	   			    	 margin-left: 400px;
						background: url("../img/icon-1.png") no-repeat center; 
	   			    	animation:water 2s ease-in-out infinite;
	   				/* margin-top: 16px;
	   				margin-left: 660px; */
	   				
	   }
	   


     .icon1,.icon2,.icon3,.icon6{
			animation:rotate1 5s ease-in-out infinite;
		}
		 .icon4,.icon5{
		 	animation:rotate2 5s ease-in-out infinite;
		 }
 /*水滴向下变化移动*/
@keyframes water{
	0%{
		opacity: 0;
	}
	100%{
		
		margin-top:520px;
	}
}
/*齿轮转动*/
 @keyframes rotate1{
		 	0%{
		 		transform:rotateZ(0deg);
		 	}
		 	100%{
		 		transform:rotateZ(360deg);
		 	}
		 } 
		 @keyframes rotate2{
		 	0%{
		 		transform:rotateZ(0deg);
		 	}
		 	100%{
		 		transform:rotateZ(-360deg);
		 	}
		 }












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
155
156
157
158
159

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

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