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>
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);
}
}
在編寫代碼中因transform寫成了transfrom,導致程序運行出錯
在設置背景時，一定要設置相應的寬和高，否則內容顯示不出來
img標籤和background-image的區別是：img是標籤,代表文檔內容，background-image是屬性，代表樣式設計。https://blog.csdn.net/weixin_44592738/article/details/103332931