云不会动动画没有效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/demo2.css">
<title></title>
<style>
.backg{
width: 100%;
height: 100vh;
}
.bluesky{
width: 100%;
height: 60%;
background: -webkit-linear-gradient(180deg, rgb(196, 228, 253,1),rgba(255,255,255,0.8));
background: -moz-linear-gradient(180deg, rgb(196, 228, 253,1),rgba(255,255,255,0.8));
background: -o-linear-gradient(180deg, rgb(196, 228, 253,1),rgba(255,255,255,0.8));
background: linear-gradient(180deg, rgb(196, 228, 253,1),rgba(255,255,255,0.8));
}
.lawn{
width: 100%;
height: 40%;
background: -webkit-linear-gradient(180deg,rgba(255,255,255,0.8) 20%,rgb(255,255,255,1) 40%,rgb(148, 190, 89,0.8) 80%,rgb(148, 190, 89,1) 100%);
background: -moz-linear-gradient(180deg,rgba(255,255,255,0.8) 20%,rgb(255,255,255,1) 40%,rgb(148, 190, 89,0.8) 80%,rgb(148, 190, 89,1) 100%);
background: -o-linear-gradient(180deg,rgba(255,255,255,0.8) 20%,rgb(255,255,255,1) 40%,rgb(148, 190, 89,0.8) 80%,rgb(148, 190, 89,1) 100%);
background: linear-gradient(180deg,rgba(255,255,255,0.8) 20%,rgb(255,255,255,1) 40%,rgb(148, 190, 89,0.8) 80%,rgb(148, 190, 89,1) 100%);
}
.cloud{
position: absolute;
background: #ffffff;
width: 200px;
height: 100px;
left: 70px;
top: 70px;
border-radius: 50px / 50px 50px 50px 50px;
}
.cloud::after{
position: absolute;
content: '';
background: #ffffff;
width: 80px;
height: 80px;
border-radius: 40px / 30px 40px 40px 40px;
top: 50%;
left: 50%;
transform: translate(14px, -68px);
}
.cloud::before{
position: absolute;
content: '';
background: #ffffff;
width: 100px;
height: 150px;
border-radius: 75px / 75px 50px 50px 50px;
top: 50%;
left: 50%;
transform: translate(-71px, -86px);
}
.cloud.one{
left: 700px;
top: 100px;
transform: scale(0.7);
opacity: 0.8;
-webkit-animation:onecloud linear 200s infinite;
animation:onecloud linear 200s infinite;
z-index: 1;
}
.cloud.two{
opacity: 0.7;
left: 500px;
top: 100px;
-webkit-animation:twocloud linear 300s infinite;
animation:twocloud linear 300s infinite;
z-index: 2;
}
.cloud.three{
transform: scale(0.5);
left: 300px;
top: 50px;
-webkit-animation:threecloud linear 100s infinite;
animation:threecloud linear 100s infinite;
z-index: 3;
}
.cloud.four{
transform: scale(0.3);
opacity: 0.6;
left: 800px;
top: 50px;
-webkit-animation:fourcloud linear 150s infinite;
animation:fourcloud linear 150s infinite;
z-index: 4;
}
.cloud.five{
-webkit-animation:fivecloud linear 400s infinite;
animation:fivecloud linear 400s infinite;
z-index: 5;
}
@-webkit-keyframes onecloud:{
from{left:0%;}
to{left: 110%;}
}
@keyframes onecloud:{
from{left:0%;}
to{left: 110%;}
}
</style>
</head>
<body>
<!--背景-->
<div class="backg">
<!--蓝天-->
<div class="bluesky">
<!--云-->
<div class="cloud one">
</div>
<div class="cloud two">
</div>
<div class="cloud three">
</div>
<div class="cloud four">
</div>
<div class="cloud five">
</div>
</div>
<!--草地-->
<div class="lawn">
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星