云彩飘得有问题啊，请问怎么破
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!-- 蓝天 -->
<div class="sky">
<div class="cloud one">
<div class="baseCloud"></div>
</div>
<div class="cloud two">
<div class="baseCloud"></div>
</div>
<div class="cloud three">
<div class="baseCloud"></div>
</div>
<div class="cloud four">
<div class="baseCloud"></div>
</div>
<div class="cloud five">
<div class="baseCloud"></div>
</div>
</div>
<!-- 草地 -->
<div class="land"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
overflow: hidden;
}
/*蓝天*/
.sky{
width: 100%;
height: 60vh;
background: linear-gradient(rgb(196, 228, 253),transparent);
position: relative;
}
/*草地*/
.land{
width: 100%;
height: 40vh;
background: linear-gradient(transparent,rgb(148, 190, 89));
}
/*云彩*/
.baseCloud{
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
transform: rotate(30deg);
position: absolute;
top: 30px;
right: 90px;
}
.cloud:after{
content: '';
display: block;
position: absolute;
width: 100px;
height: 60px;
background: #fff;
border-radius: 50px;
top: 60px;
right: 135px;
transform: rotate(60deg);
z-index: 2;
}
.cloud:before{
content: '';
display: block;
position: absolute;
width: 170px;
height: 60px;
background: #fff;
border-radius: 130px/130px 131px 130px 130px;
z-index: 1;
top: 60px;
right: 74px;
}
/*通过缩放出五个不一样的小云彩*/
.cloud.one{
position: absolute;
right: -10%;
transform:translateX(0);
animation: moveone 7s linear infinite normal;
}
.cloud.two{
position: absolute;
top: -30px;
right: 17%;
transform: scale(0.75,0.75);
opacity: 0.6;
animation: movetwo 9s linear infinite normal;
}
.cloud.three{
position: absolute;
top: 70px;
right: 3%;
transform: scale(0.8,0.8);
opacity: 0.8;
animation: movethree 9s linear infinite normal;
}
.cloud.four{
position: absolute;
top: 110px;
right: -24%;
transform: scale(0.5,0.5);
opacity: 0.7;
animation: movefour 10s linear infinite normal;
}
.cloud.five{
position: absolute;
top: -10px;
right: -25%;
transform: scale(0.6,0.5);
opacity: 0.6;
animation: movefive 7s linear infinite normal;
}
/*命名五个动画让云彩飘动起来*/
@keyframes moveone{
from{ right: -10%;}
to{ right: 100%; }
}
@keyframes movetwo{
from{ right: 17%; }
to{ right: 100%; }
}
@keyframes movethree{
from{ right:3%; }
to{ right: 100%; }
}
@keyframes movefour{
from{ right: -24%; }
to{ right: 100%; }
}
@keyframes movefive{
from{ right: -25%; }
to{ right: 100%; }
}
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星