老师，可以帮忙检查一下吗？
来源：2-14 项目作业
Darkholme
2020-05-28 13:18:29
可能我的毛病有点多，不过云彩有点懒得设计了，就是动画这里感觉问题有点多
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="cloud.css"><!-- External Css File -->
</head>
<body>
<div class="sky"><!-- The blue sky -->
<div class="cloud a"></div><!-- MOVING CLOUDS -->
<div class="cloud b"></div>
<div class="cloud c"></div>
<div class="cloud d"></div>
<div class="cloud e"></div>
</div>
<div class="lawn"></div><!-- Green lawn -->
</body>
</html>
*{margin:0; padding:0;}
body{/* body size settings */
width: 1390px;
height: 700px;
}
.sky{/* Sky decoration */
position: relative;
width: 100%;
height: 60%;
background-image:linear-gradient(180deg,rgb(196, 228, 253), transparent);
-webkit-background-image:linear-gradient(180deg,rgb(196, 228, 253), transparent);
}
.cloud{/* Cloud shaping */
position: absolute;
width: 110px;
height: 110px;
background-color: white;
border-radius: 50%;
top: 95px;
right: 400px;
z-index: 3;
animation: mova 7s ease-in-out infinite;
}
.cloud:before{/* Cloud shaping */
display: block;
content: "";
position: absolute;
width: 200px;
height: 60px;
background-color: white;
border-radius: 40%;
transform: translate(-60px,30px );
}
.cloud:after{/* Cloud shaping */
display: block;
content: "";
position: absolute;
width: 80px;
height: 90px;
background-color: white;
border-radius: 50%;
transform: translate(-45px,15px ) rotate(-45deg);
}
.sky .b{/* Cloudb performance */
opacity: .8;
top: 35px;
right: 120px;
transform: scale(.7, .7);
z-index: 2;
animation: movb 8s ease-in-out infinite;
}
.sky .c{/* Cloudc performance */
opacity: .5;
top: 130px;
right: 100px;
transform: scale(.7, .7);
z-index: 1;
animation: movc 15s ease-in-out infinite;
}
.sky .d{/* Cloudd performance */
opacity: .6;
top: 50px;
right: -150px;
transform: scale(.6, .6);
z-index: 4;
animation: movd 18s ease-in-out infinite;
}
.sky .e{/* Cloude performance */
opacity: .3;
top: 110px;
right: -300px;
transform: scale(.5, .5);
z-index: 5;
animation: move 20s ease-in-out infinite;
}
.lawn{/* Lawn color gradients */
position: relative;
width: 100%;
height: 40%;
-webkit-background-image:linear-gradient(0deg, rgb(148, 190, 89), transparent);
background-image:linear-gradient(0deg, rgb(148, 190, 89), transparent);
}
.lawn:before{/* Rabbit */
content: "";
display: block;
width: 200px;
height: 200px;
position: absolute;
background: url(rabbit.png) no-repeat center;
background-size: 200px 200px;
right: 100px;
bottom:30px;
}
@keyframes mova{/* Biggest cloud animation set */
from{right: -200px;}
to{right:1590px;}
}
@keyframes movb{/* cloudb animation set */
from{right: -600px;}
to{right:1590px;}
}
@keyframes movc{/* cloudc animation set */
from{right: -500px;}
to{right:1590px;}
}
@keyframes movd{/* cloudd animation set */
from{right: -800px;}
to{right:1590px;}
}
@keyframes move{/* cloude animation set */
from{right: -900px;}
to{right:1590px;}
}
1回答
-
同学你好，由于body设置了固定宽高，导致在其他屏幕下打开页面，整体没有全屏显示，且出现了水平滚动条。如下所示
建议：给html和body元素设置宽高百分百，适应窗口大小显示，然后添加overflow:hidden;属性，超出隐藏显示，防止出现滚动条
动画效果实现是可以的，建议优化：可以使用百分比同意设置动画帧，使用时设置不同的动画时间即可，简化代码书写。示例：
同学完整作业后可以提交作业，批作业的老师会针对同学的作业给出详细的修改建议，并整理成文档发送给同学，方便同学查看与修改。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
1h020-05-28
相似问题