2-15作业
来源：2-15 作业题
夕落呀
2018-12-06 16:28:56
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top">
<div class="cloud box1"></div>
<div class="cloud box2"></div>
<div class="cloud box3"></div>
<div class="cloud box4"></div>
<div class="cloud box5"></div>
</div>
<div class="bottom">
<div class="rabbit">
<img src="img/rabbit.png">
</div>
</div>
</body>
</html>
css
*{
padding: 0;
margin: 0;
}
body{
overflow: hidden;
}
/*天空草地的样式*/
.top{
height: 60vh;
position: relative;
-webkit-background: linear-gradient(rgb(196,228,253),rgb(255,255,255));
-moz-background: linear-gradient(rgb(196,228,253),rgb(255,255,255));
-o-background: linear-gradient(rgb(196,228,253),rgb(255,255,255));
background: linear-gradient(rgb(196,228,253),rgb(255,255,255));
}
.bottom{
height: 40vh;
position: relative;
-webkit-background: linear-gradient(rgb(255,255,255),rgb(148,190,89));
-moz-background: linear-gradient(rgb(255,255,255),rgb(148,190,89));
-o-background: linear-gradient(rgb(255,255,255),rgb(148,190,89));
background: linear-gradient(rgb(255,255,255),rgb(148,190,89));
}
/*rabbit样式*/
.rabbit{
width: 300px;
height: 300px;
position: absolute;
bottom: 50px;
right: 200px;
}
.rabbit img{
width: 100%;
height: 100%;
}
/*cloud样式*/
.cloud{
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
}
.cloud:before{
content: ' ';
width: 180px;
height: 45px;
display: block;
position: absolute;
top: 45px;
left: -60px;
border-radius: 45px;
background-color: #fff;
}
.cloud:after{
height: 45px;
width: 90px;
content: " ";
display: block;
position: absolute;
top:40px;
left:-50px;
border-radius: 45px;
transform:rotate(-125deg);
background-color: #fff;
}
/*box的动画及缩放*/
.top > div{
position: absolute;
}
.box1{
top:10px;
opacity: 0.7;
transform:scale(0.6);
animation: one 7s ease-in infinite;
}
.box2{
top:150px;
opacity: 0.7;
transform:scale(0.6);
animation: two 8s ease-in infinite;
}
.box3{
top:80px;
opacity: 1;
transform:scale(0.8);
animation: three 6s ease-in infinite;
}
.box4{
top:130px;
opacity: 0.6;
transform:scale(0.4);
animation: four 10s ease-in infinite;
}
.box5{
top:10px;
opacity: 0.7;
transform:scale(0.6);
animation: five 9s ease-in infinite;
}
@keyframes one{
from {
right:-120px;
}
to {
right: 150%;
}
}
@keyframes two{
from {
right:-120px;
}
to {
right: 150%;
}
}
@keyframes three{
from {
right:-400px;
}
to {
right: 150%;
}
}
@keyframes four{
from {
right:-120px;
}
to {
right: 150%;
}
}
@keyframes five{
from {
right:-120px;
}
to {
right: 150%;
}
}
1回答
-
好帮手慕星星
2018-12-06
代码实现的动画效果是没有问题的，建议5个白云设置相同的动画，例如：
在动画时间上控制下就可以。
白云的效果可以再完善下：
左侧的块高度有些高了，可以适当减少让连接处圆滑些。
祝学习愉快！
0
相似问题