老师为什么我的云总是一起出现没有层次感

来源：2-14 项目作业

Sunflower加油

2019-05-20 12:06:02

<!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>rabbit</title>
<style type="text/css">
:root{
--White:#fff;
}
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
overflow: hidden;
}
/* 这是蓝天 */
.sky{
height: 60vh;
background: linear-gradient(rgb(196, 228, 253, 1),rgb(196, 228, 253, 0));
position: relative;
}
/* 这是草地 */
.grassland{
height: 40vh;
background: linear-gradient(rgb(148, 190, 89, 0),rgb(148, 190, 89, 1));
}
/* 这是兔子 */
.rabbit{
width: 300px;
height: 300px;
background: url(../rabbit.png) no-repeat center;
background-size: 240px 240px;
position: absolute;
bottom: 50px;
right: 200px;
}
/* 这是云 */
.clouds{
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--White);
display: inline-block;
position: absolute;
}
.clouds::before{
content: "";
display: block;
width: 130px;
height: 40px;
background: var(--White);
border-radius: 50px;
transform: translate(-42px,36px);
}
.clouds::after{
content: "";
display: block;
width: 60px;
height: 65px;
background: var(--White);
border-radius: 50px;
transform: rotate(-10deg) translate(-28px,-25px);
}
/* 这是每个云的样式 */
.sky>.clouds1{
z-index: 3;
opacity: .9;
top: 50px;
left: 150px;
animation: clouds 9s linear infinite;
transform: scale(1.2);
}
.sky>.clouds2{
z-index: 1;
opacity: 0.7;
transform: scale(1);
top: 0;
left: 100px;
animation: clouds 10s linear infinite;
}
.sky>.clouds3{
z-index: 2;
opacity: 0.6;
transform: scale(1.1);
top: 110px;
left: 150px;
animation: clouds 11s linear infinite;
}
.sky>.clouds4{
z-index: 5;
opacity: 0.7;
transform: scale(0.9);
top: 0;
left: 200px;
animation: clouds 18s linear infinite;
}
.sky>.clouds5{
z-index: 4;
opacity: 0.5;
transform: scale(0.8);
top: 80px;
left: 220px;
animation: clouds 16s linear infinite;
}
/* 这是云动画 */
@keyframes clouds{
from{left: 100%}
to{left: -100%}
}



</style>
</head>
<body>
<!-- 这是蓝天 -->
<div class="sky">
<!-- 这是白云 -->
<div class="clouds clouds1"></div>
<div class="clouds clouds2"></div>
<div class="clouds clouds3"></div>
<div class="clouds clouds4"></div>
<div class="clouds clouds5"></div>
</div>
<!-- 这是草地 -->
<div class="grassland">
<!-- 这是兔子 -->
<div class="rabbit"></div>
</div>
</body>
</html>

写回答

1回答