老师，求帮忙检查
来源：2-14 项目作业
大宝的爸爸
2019-12-11 10:09:44
<!DOCTYPE html>
<html>
<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>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 天空布局 */
.sky {width: 100%;height: 600px;background: linear-gradient(rgb(196, 228, 253), #fff);}
/* 第一朵云 */
.cloud1 {width: 100px;height: 25px;border-radius: 25px;position: relative;right: 150px;top: 140px;background: #ffffff;transform: scale(2.1, 2.1);z-index: 9999;opacity: 0.9;animation: cloud1 14s linear 0s infinite;}
@keyframes cloud1
{
0% {right: -100%;}
100% {right: 100%;}
}
.cloud1:before {position: absolute;width: 50px;height: 25px;border-radius: 25px;background: #ffffff;content: "";transform: rotate(60deg);left: 5px;top: -2px;}
.cloud1::after {position: absolute;width: 60px;height: 60px;border-radius: 60px;background: #ffffff;content: "";left: 30px;top: -25px;}
/* 第二朵云 */
.cloud2 {width: 100px;height: 25px;border-radius: 25px;position: relative;right: 150px;top: 45px;background: #ffffff;transform: scale(1.9, 1.9);z-index: 9999;opacity: 0.8;animation: cloud2 17s linear 0s infinite;}
@keyframes cloud2
{
0% {right: -100%;}
100% {right: 100%;}
}
.cloud2:before {position: absolute;width: 50px;height: 25px;border-radius: 25px;background: #ffffff;content: "";transform: rotate(60deg);left: 5px;top: -2px;}
.cloud2::after {position: absolute;width: 60px;height: 60px;border-radius: 60px;background: #ffffff;content: "";left: 30px;top: -25px;}
/* 第三朵云 */
.cloud3 {width: 100px;height: 25px;border-radius: 25px;position: relative;right: 150px;top: 180px;background: #ffffff;transform: scale(1.9, 1.9);z-index: 9999;opacity: 0.7;animation: cloud3 16s linear 0s infinite;}
@keyframes cloud3
{
0% {right: -100%;}
100% {right: 100%;}
}
.cloud3:before {position: absolute;width: 50px;height: 25px;border-radius: 25px;background: #ffffff;content: ""; transform: rotate(60deg);left: 5px;top: -2px;}
.cloud3::after {position: absolute;width: 60px;height: 60px;border-radius: 60px;background: #ffffff;content: "";left: 30px;top: -25px;}
/* 第四朵云 */
.cloud4 {width: 100px;height: 25px;border-radius: 25px;position: relative;right: 150px;top: -5px;background: #ffffff;transform: scale(1.8, 1.8);z-index: 9999;opacity: 0.9;animation: cloud4 17s linear 0s infinite;}
@keyframes cloud4
{
0% {right: -115%;}
100% {right: 100%;}
}
.cloud4:before {position: absolute;width: 50px;
height: 25px;border-radius: 25px;background: #ffffff;content: "";transform: rotate(60deg);left: 5px;top: -2px;}
.cloud4::after {position: absolute;width: 60px;height: 60px;border-radius: 60px;background: #ffffff;content: "";left: 30px;top: -25px;}
/* 第五朵云 */
.cloud5 {width: 100px;height: 25px;border-radius: 25px;position: relative;right: 150px;top: 80px;background: #ffffff;transform: scale(1.6, 1.6);z-index: 9999;opacity: 0.6;animation: cloud5 20s linear 0s infinite;}
@keyframes cloud5
{
0% {right: -115%;}
100% {right: 100%;}
}
.cloud5:before {position: absolute;width: 50px;height: 25px;border-radius: 25px;background: #ffffff;content: "";transform: rotate(60deg);left: 5px;top: -2px;}
.cloud5::after {position: absolute;width: 60px;height: 60px;border-radius: 60px;background: #ffffff;content: "";left: 30px;top: -25px;}
/* 草地部分 */
.land {width: 100%;height: 400px;background: linear-gradient(#fff, rgb(148, 190, 89));position: relative;}
.rabbit {width: 100px;height: 100px;right: 300px;bottom: 250px;position: absolute;transform: scale(0.2, 0.2);}
</style>
</head>
<body>
<!-- 天空部分 -->
<div class="sky">
<!-- 1~5的云朵 -->
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
<div class="cloud4"></div>
<div class="cloud5"></div>
</div>
<!-- 草坪部分 -->
<div class="land">
<div class="rabbit"><img src="img/rabbit.png" alt="这是小兔子"></div>
</div>
</body>
</html>
1回答
-
好帮手慕夭夭
2019-12-11
同学你好，整体实现的还不错。另外，在作业区域是可以上传作业的，建议同学上传作业。会有批复作业的老师为你指导，并把问题与修改方案整理成文档发送给你，能够更好的帮助你完善作业哦。
祝学习愉快！
0
相似问题