为什么兔子显示不出来？还有老师我画的云很丑啊，该怎么画？
.sky{
width: 100%;
height:600px;
background:linear-gradient( rgb(196, 228, 253),white);
position: relative;
}
.grass{
width:100%;
height:400px;
background: linear-gradient( white,rgb(148, 190, 89));
position: relative;
z-index: 0;
}
.move{
position: absolute;
width:150px;
height:80px;
border-radius:80px 60px 40px 43px;
background: white;
left:700px;
top:90px;
animation: animation 14s ease-out;
animation-iteration-count: infinite;
}
.move::before{
content: "";
position: absolute;
width:150px;
height:90px;
border-radius:75px/40px 50px 40px 40px;
background: white;
left:30px;
top:15px;
transform: rotate(14deg);
}
.move::after{
content: "";
position: absolute;
width:150px;
height:90px;
border-radius:200px 200px 120px 20px;
background: white;
transform: rotate(-1deg);
left:70px;
top:-20px;
}
.two{
position: absolute;
width:150px;
height:80px;
border-radius:80px 60px 40px 43px;
background: white;
left:1600px;
top:80px;
opacity: 0.8;
animation: animation 13s ease-out;
animation-iteration-count: infinite;
}
.three{
position: absolute;
width:150px;
height:80px;
border-radius:80px 60px 40px 43px;
background: white;
left:2300px;
top:80px;
opacity: 0.7;
transform: scale(0.9);
animation: animation 11s ease-out;
animation-iteration-count: infinite;
}
.four{
position: absolute;
width:150px;
height:80px;
border-radius:80px 60px 40px 43px;
background: white;
left:1900px;
top:260px;
opacity: 0.6;
transform: scale(0.7);
animation: animation 14s ease-out;
animation-iteration-count: infinite;
}
.five{
position: absolute;
width:150px;
height:80px;
border-radius:80px 60px 40px 43px;
background: white;
left:1200px;
top:200px;
opacity: 0.6;
transform: scale(0.7);
animation: animation 12s ease-out;
animation-iteration-count: infinite;
}
@keyframes animation{
from{ transform: translate(1200px);}
to{transform: translate(-2700px);}
}
.rabbit{
background: url(../img/rabbit.png) no-repeat ;
position: absolute;
z-index: 999;
left: 200px;
bottom: 50px;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../CSS/index.css"> </head> <body> <div class="sky"> <div class="move one"></div> <div class="move two"></div> <div class="move three"></div> <div class="move four"></div> <div class="move five"></div> </div> <div class="grass"> <div class="rabbit"> </div> </div> </body> </html>
33
收起
正在回答 回答被采纳积分+1
4回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星