为什么兔子显示不出来？路径没有问题
<!DOCTYPE html>
<html>
<head>
<title>css动画</title>
<style type="text/css">
*{
padding: 0px; margin: 0px;}
.sky{ /*蓝天*/
width: 100%;height:430px;
background: linear-gradient(180deg,rgb(196, 228, 253) 0%,white 100%);
position: relative;
}
/*云样式*/
.sky>div{ /*白云*/
width: 100px;height: 100px; background: white;
border-radius: 50px;position: absolute;
}
.sky>div:before{ /*用子div的before和after伪元素转块元素，
控制其大小、圆角、位置及其缩放等，
让其与云div一起组成云朵。*/
content: "";display: block;
width:160px; height:60px;
border-radius:50px;
background: #fff;
position: absolute;
top: 29px;left: 20px;
transform: translate(-62px,0);
}
.sky>div:after{/*用子div的before和after伪元素转块元素，
控制其大小、圆角、位置及其缩放等，
让其与云div一起组成云朵。*/
content: "";display: block;
width: 80px;height: 50px;
background: #fff;
border-radius: 50px;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-76px,0) rotate(60deg);
}
/*各个云样式*/
.could1{
top: 150px; opacity: 0.75;
animation: could1 9s linear infinite;
z-index: 5;
}
.could2{
top: 50px; opacity: 0.8;z-index: 4;
animation: could2 8s linear infinite;
}
.could3{ z-index: 3;
top:10px; opacity: 0.75;background: blue;
transform: scale(.7);opacity: 0.65;
animation: could3 10s linear infinite;
}
.could4{ z-index: 2;
top: 0px; opacity: 0.6;
animation: could4 12s linear infinite;
transform: scale(0.7);
}
.could5{ z-index: 1;
top: 150px;opacity: 0.9;
animation: could5 13s linear infinite;
transform: scale(0.7);
}
@keyframes could1{
0%{left: 110%;}
100%{left: -10%;}
}
@keyframes could2{
0%{left: 110%;}
100%{left: -10%;}
}
@keyframes could3{
0%{left: 90%;}
100%{left: -10%;}
}
@keyframes could4{
0%{left: 125%;}
100%{left: -10%;}
}
@keyframes could5{
0%{left: 120%;}
100%{left: -10%;}
}
.lawn{/*草地*/
width: 100%; height: 300px;position: relative;
background: linear-gradient(0deg,rgb(148, 190, 89) 0%,white 100%);
}
.lawn:before{
content: "";display: block;
width: 300px;height: 300px;
background:url(photo/rabbit.png) no-repeat center;
background-size:100%;
position: absolute;
bottom: 20px;left: 200px;
}
</style>
</head>
<body>
<div class="sky">
<div class="could1"></div>
<div class="could2"></div>
<div class="could3"></div>
<div class="could4"></div>
<div class="could5"></div>
</div>
<div class="lawn"></div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星