麻烦老师检查作业，
来源：2-14 项目作业
陈孝芳
2019-11-16 20:11:49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>homework4</title>
<style type="text/css">
.sky{
width: 100%;
height: 480px;
background:linear-gradient(rgb(196, 228, 253) 0%,#fff 100%);
position: relative;
}
.grass{
width:100%;
height:222px;
background:linear-gradient(#fff 0%,rgb(148,190,89) 100%);
}
.sky > .cloud1{
width: 160px;
height: 35px;
background: #fff;
position: relative;
border-radius: 315px 254px 286px 251px;
top: 55px;
left: 105px;
animation:cloud1 12s linear infinite;
opacity:.9;
}
.cloud1:before{
content: '';
width: 60px;
height: 70px;
background: #fff;
position: absolute;
border-radius: 103px 97px 80px 90px;
top: -25px;
left: 15px;
transform: rotate(-16deg);
}
.cloud1:after{
content: '';
width: 80px;
height: 90px;
background: #fff;
position: absolute;
border-radius: 103px 97px 80px 90px;
top: -41px;
left: 65px;
transform: rotate(20deg);
}
.sky > .cloud2{
width: 130px;
height: 28px;
background: #fff;
position: relative;
border-radius: 122px 121px 125px 117px;
top: 125px;
left: 156px;
animation:cloud2 14s linear infinite;
opacity:1;
}
.cloud2:before{
content: '';
width: 54px;
height: 63px;
background: #fff;
position: absolute;
border-radius: 103px 97px 80px 90px;
top: -25px;
left: 15px;
transform: rotate(-15deg);
}
.cloud2:after{
content: '';
width: 66px;
height: 73px;
background: #fff;
position: absolute;
border-radius: 197px 127px 128px 119px;
top: -31px;
left: 53px;
transform: rotate(6deg);
}
.sky > .cloud3{
width: 130px;
height: 28px;
background: #fff;
position: relative;
border-radius: 122px 121px 125px 117px;
top: 49px;
left: 289px;
animation:cloud3 15s linear infinite;
opacity:.8;
}
.cloud3:before{
content: '';
width: 54px;
height: 63px;
background: #fff;
position: absolute;
border-radius: 103px 97px 80px 90px;
top: -25px;
left: 15px;
transform: rotate(-15deg);
}
.cloud3:after{
content: '';
width: 66px;
height: 73px;
background: #fff;
position: absolute;
border-radius: 197px 127px 128px 119px;
top: -31px;
left: 53px;
transform: rotate(6deg);
}
.sky > .cloud4{
width: 130px;
height: 28px;
background: #fff;
position: relative;
border-radius: 122px 121px 125px 117px;
top: -23px;
left: 384px;
animation:cloud4 18s linear infinite;
opacity:.9;
}
.cloud4:before{
content: '';
width: 54px;
height: 63px;
background: #fff;
position: absolute;
border-radius: 103px 97px 80px 90px;
top: -25px;
left: 15px;
transform: rotate(-15deg);
}
.cloud4:after{
content: '';
width: 66px;
height: 73px;
background: #fff;
position: absolute;
border-radius: 197px 127px 128px 119px;
top: -31px;
left: 53px;
transform: rotate(6deg);
} .sky > .cloud5{
width: 130px;
height: 28px;
background: #fff;
position: relative;
border-radius: 122px 121px 125px 117px;
top: 38px;
left: 474px;
animation:cloud5 19s linear infinite;
opacity:.6;
}
.cloud5:before{
content: '';
width: 54px;
height: 63px;
background: #fff;
position: absolute;
border-radius: 103px 97px 80px 90px;
top: -25px;
left: 15px;
transform: rotate(-15deg);
}
.cloud5:after{
content: '';
width: 66px;
height: 73px;
background: #fff;
position: absolute;
border-radius: 197px 127px 128px 119px;
top: -31px;
left: 53px;
transform: rotate(6deg);
}
.grass > img{
width:200px;
height:100px;
display:block;
position:absolute;
bottom:50px;
right:200px;
}
@keyframes cloud1{
0%{left:90%;}
100%{left:-95%;}
}
@keyframes cloud2{
0%{left:90%;}
100%{left:-95%;}
}
@keyframes cloud3{
0%{left:90%;}
100%{left:-95%;}
}
@keyframes cloud4{
0%{left:90%;}
100%{left:-95%;}
}
@keyframes cloud5{
0%{left:90%;}
100%{left:-95%;}
}
</style>
</head>
<body>
<div class="sky">
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
<div class="cloud4"></div>
<div class="cloud5"></div>
</div>
</div>
<div class="grass">
<img src="rabbit.png">
</div>
</body>
</html>
1回答
-
好帮手慕粉
2019-11-17
同学你好，关于同学的问题解答如下：
1、天空跟草地的高度占比不正确。作业要求的是天空：草地=6:4，不建议同学使用具体的px值来实现，因为每个电脑的分辨率不同，所以在内个电脑上的显示就可能不相同，建议同学采用百分比实现，参考：
2、云朵的形状不太符合作业要求且实现代码有点复杂，老师这提供了一个云朵的模型同学可以参考一下：
因为同学这个作业的问题比较多，所以老师只是给同学说了大致的一些，如果要说完的话，可能要写几页文档，建议同学提交作业，会有作业批复老师进行详细的批改，提供给同学一个作业批复文档，同学再参考那个完整的实现一下。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题