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