2-15问题

来源：2-15 作业题

qq_一个人一個人_0

2018-09-03 17:06:25

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蓝天白云和小白兔</title>
<style>
*{
margin: 0;
padding: 0;
}
.world{
width: 100%;
height: 758px;
position: relative;
overflow: hidden;
background: linear-gradient(rgb(196, 228, 253), white 60%, rgb(148, 190, 89));
}
.world img{
width: 250px;
height: 200px;
display: block;
position: absolute;
top: 475px;
left: 1090px;
}
.yun{
width: 380px;
height: 270px;
margin: 66px auto;
position: relative;
animation: to_left 13s ease-in infinite  normal none;
}
.yun .y1{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
background-color: #ffffff;
position: relative;
top: 55px;
left: 60px;
}
.yun .y1:before{
width: 100px;
height: 100px;
display: block;
content: "";
border-radius: 50%;
background-color: #ffffff;
position: absolute;
top: -30px;
left: 45px;
}
.yun .y1:after{
width: 100px;
height: 100px;
display: block;
content: "";
border-radius: 50%;
background-color: rgba(255, 255, 255);
position: absolute;
top: 18px;
left: 70px;
}
.yun .y2{
width: 150px;
height: 150px;
display: block;
border-radius: 50%;
background-color: rgba(255, 255, 255);
position: absolute;
top: -20px;
left: 160px;
}.yun .y3{
width: 200px;
height: 115px;
display: block;
border-radius: 50%;
background-color: rgba(255, 255, 255);
position: absolute;
top: 55px;
left: 170px;
}
.a{
position: absolute;
top: 85px;
left: 155px;
transform: scale(.5, .5);
opacity: .6;
animation: go_left 15s ease-out infinite  normal none;
}
.b{
position: absolute;
top: -85px;
left: -40px;
transform: scale(.6, .6);
opacity: .8;
animation: move_left 11s ease-out infinite  normal none;
}
.c{
position: absolute;
top: 45px;
left: 910px;
transform: scale(.3, .3);
opacity: .75;
animation: moveto_left 10s ease-in-out infinite  normal none;
}
.d{
position: absolute;
top: 10px;
left: 1100px;
transform: scale(.8, .8);
opacity: .7;
animation: goto_left 12.8s ease-out infinite  normal none;
}
@keyframes to_left{
from{transform: translateX(1200px);}
to{transform: translateX(-1500px);}
}
@keyframes go_left{
from{transform: translateX(1200px);}
to{transform: translateX(-1500px);}
}
@keyframes move_left{
from{transform: translateX(1200px);}
to{transform: translateX(-1500px);}
}
@keyframes moveto_left{
from{transform: translateX(1200px);}
to{transform: translateX(-1500px);}1000px
}
@keyframes goto_left{
from{transform: translateX(1200px);}
to{transform: translateX(-1500px);}
}
</style>
</head>
<body>
<div class="world">
<div class="yun">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
</div>
<div class="yun a">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
</div>
<div class="yun b">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
</div>
<div class="yun c">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
</div>
<div class="yun d">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
</div>
<img src="img/rabbit.png" alt="小白兔">
</div>
</body>
</html>

老师，为什么我添加了动画之后所有的云的大小都变成一样的呢，设置的缩放都没用了

写回答

1回答