求教，老师，页面刚打开的时候，左边有两朵云，为什么自动消失，没有动画效果？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/index.css">
<title>Rabbit</title>
</head>
<body>
<div class="box">
<!--天空-->
<div class="sky">
<div class="cloud cloud_1"></div>
<div class="cloud cloud_2"></div>
<div class="cloud cloud_3"></div>
<div class="cloud cloud_4"></div>
<div class="cloud cloud_5"></div>
</div>
<!--草地-->
<div class="grass">
<img src="rabbit.png"/>
</div>
</div>
</body>
</html>
CSS代码：
*{
margin:0;
padding:0;
border:none;
}
img{
display:block;
}
html,
body{
height:100%;
overflow:hidden;
}
.box{
height:100%;
width:100%;
}
.box > .sky{
width:100%;
height:60%;
background:-moz-linear-gradient( rgb(196, 228, 253) 0%,#fff 60%);
background:-webkit-linear-gradient( rgb(196, 228, 253) 0%,#fff 60%);
background:-o-linear-gradient( rgb(196, 228, 253) 0%,#fff 60%);
background:linear-gradient( rgb(196, 228, 253) 0%,#fff 60%);
}
.box > .grass{
width:100%;
height:40%;
background:-webkit-linear-gradient(#fff 60%, rgb(148, 190, 89) 100%);
background:-moz-linear-gradient(#fff 60%, rgb(148, 190, 89) 100%);
background:-o-linear-gradient(#fff 60%, rgb(148, 190, 89) 100%);
background:linear-gradient(#fff 60%, rgb(148, 190, 89) 100%);
}
.box > .grass > img{
width:240px;
height:230px;
display:block;
position:absolute;
bottom:30px;
right:200px;
}
/*白云*/
.box > .sky > .cloud{
width:240px;
height:60px;
background: #fff;
border-radius:60px;
position:relative;
left: 100px;
top:100px;
}
.box > .sky > .cloud:before{
content:"";
position:absolute;
left:20px;
bottom:5px;
width:110px;
height:80px;
background: #fff;
border-radius:60px;
transform:rotate(45deg);
z-index:1;
}
.box > .sky > .cloud:after{
content:"";
width:130px;
height:130px;
border-radius:130px;
background:#fff;
position:absolute;
left:80px;
bottom:-5px;
z-index: 2;
}
@keyframes cloud{
from{
left:100%;
}
to{
left:-100%;
}
}
.box > .sky > .cloud_1{
top:50px;
right:-100%;
opacity:1;
transform:scale(0.9);
animation:cloud 7s linear infinite;
}
.box > .sky > .cloud_2{
top:60px;
right:-100%;
opacity:0.8;
transform:scale(0.7);
animation:cloud 8s linear 1s infinite;
}
.box > .sky > .cloud_3{
top:70px;
right:-100%;
opacity:0.5;
transform:scale(0.7);
animation:cloud 9s linear .5s infinite;
}
.box > .sky > .cloud_4{
top:80px;
right:-100%;
opacity:0.4;
transform:scale(0.8);
animation:cloud 10s linear .8s infinite;
}
.box > .sky > .cloud_5{
top:90px;
right:-100%;
opacity:.9;
animation:cloud 11s linear 1.4s infinite;
}
正在回答
同学你好，不仅两朵云，设置了动画延迟时间的云都是这种效果。
一开始云朵设置right值为-100%，会显示在页面左侧，动画中有延迟的，也就是在几秒后会添加动画，才会从右侧移动到左侧，这样左侧的云朵就会消失。
建议：将一开始的right值修改为left值100%，参考：
五朵云都需要修改。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星