效果图
![动态齿轮图](https://img-blog.csdnimg.cn/8017829de5b74e27abec4414fb9aba07.png)
html代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/chilun.css">
</head>
<body>
<div id="aaaa"></div>
<div id="luntai">
<div class="shixin">
<div class="hua"></div>
</div>
</div>
<div id="yingjing">
<div class="yingjing"></div>
</div>
<div id="yingjingshang">
<div class="yingjingshang"></div>
</div>
<div id="yingjingxia">
<div class="yingjingxia"></div>
</div>
<div id="xia">
<div class="xia1">
<div class="xia2"></div>
</div>
</div>
<div id="xuan">
<div class="xuan1">
<div class="xuan2"></div>
</div>
</div>
<div id="cun"></div>
<div id="xuxian"></div>
</body>
</html>
css代码块
body{
height:0;
width: 0;
background-color:#015962 ;
}
#aaaa{
height: 650px;
width: 350px;
background-image:url('../img/tu.png');
background-repeat:no-repeat;
background-position:-350px -870px;
opacity:0.5;
position: absolute;
left: 500px;
}
#luntai{
height: 320px;
width: 320px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -993px;
border-radius: 50%;
position: absolute;
left: 400px;
top: 180px;
animation: rotate 10s linear infinite;
}
.shixin{
height: 87px;
width: 87px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -857px;
border-radius: 50%;
position: absolute;
left: 116.5px;
top: 116.5px;
}
.hua{
height: 60px;
width: 60px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -745px;
border-radius: 50%;
position: absolute;
left: 13.5px;
top: 13.5px;
animation: rotatea 5s linear infinite;
}
#yingjing{
height: 235px;
width: 235px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: -370px -280px;
border-radius: 50%;
position: absolute;
left: 560px;
top: 90px;
animation: rotate 10s linear infinite;
}
.yingjing{
height: 110px;
width: 110px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: -370px -0px;
border-radius: 50%;
position: absolute;
left: 57.5px;
top: 57.5px;
animation: rotatea 5s linear infinite;
}
#yingjingshang{
height: 120px;
width: 120px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -185px;
border-radius: 50%;
position: absolute;
left: 495px;
top: 30px;
animation: rotatea 6.65s linear infinite;
}
.yingjingshang{
height: 85px;
width: 85px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -1490px;
border-radius: 50%;
position: absolute;
left: 17.5px;
top: 17.5px;
animation: rotate 4s linear infinite;
}
#yingjingxia{
height: 135px;
width: 135px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -1930px;
border-radius: 50%;
position: absolute;
left: 680px;
top: 300px;
animation: rotatea 7.6s linear infinite;
}
.yingjingxia{
height: 70px;
width: 70px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -1620px;
border-radius: 50%;
position: absolute;
left: 30px;
top: 30px;
}
#xia{
height: 165px;
width: 165px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -530px;
border-radius: 50%;
position: absolute;
left: 580px;
top: 400px;
animation: rotate 6.5s linear infinite;
}
.xia1{
height: 125px;
width: 125px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -355px;
border-radius: 50%;
position: absolute;
left: 20px;
top: 20px;
animation: rotatea 4s linear infinite;
}
.xia2{
height: 80px;
width: 80px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: 0px -1365px;
border-radius: 50%;
position: absolute;
left: 22.5px;
top: 22.5px;
animation: rotate 3.25s linear infinite;
}
#xuan{
height: 150px;
width: 150px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: -370px -705px;
border-radius: 50%;
position: absolute;
left: 350px;
top: 120px;
animation: rotatee 20s linear infinite;
}
.xuan1{
height: 135px;
width: 135px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: -0px -1745px;
border-radius: 50%;
position: absolute;
left: 7.5px;
top: 7.5px;
animation: rotatee 20s linear infinite;
}
.xuan2{
height: 75px;
width: 75px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: -370px -155px;
border-radius: 50%;
position: absolute;
left: 30px;
top: 30px;
animation: rotatee 20s linear infinite;
}
#cun{
height: 90px;
width: 35px;
background-image: url(../img/tu.png);
background-repeat: no-repeat;
background-position: -370px -560px;
position: absolute;
left: 334px;
top: 265px;
animation: shaking 20s linear infinite;
}
#xuxian{
border-style:dotted;
height: 70px;
color: #C8D94A;
border-width:1px;
position: absolute;
left: 350px;
top: 200px;
animation: shakinga 20s linear infinite;
}
@keyframes shakinga {
0% {
height:70px;
}
50% {
height:270px;
}
100% {
height:70px;
}
}
@keyframes shaking {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(200px);
}
100% {
transform: translateY(0px);
}
}
@keyframes rotate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotatee {
0% {
transform: rotate(0);
}
50% {
transform: rotate(-360deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes rotatea {
0% {
transform: rotate(0);
}
50% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-360deg);
}
}