老师，我这个白云动起来第二遍后会有滚动条出现，不知道怎么回事
来源：2-12 汉克狗最终动画效果
小屁鹤
2019-09-05 21:14:50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sky{
width: 100%;
height: 365.4px;
background:-webkit-linear-gradient(rgb(196, 228, 253) 70%, rgb(255,255,255));
background: -moz-linear-gradient(rgb(196, 228, 253) 70%, rgb(255,255,255));
background: -o-linear-gradient(rgb(196, 228, 253) 70%, rgb(255,255,255));
background: linear-gradient(rgb(196, 228, 253) 70%, rgb(255,255,255));
position: relative;
}
.grassland{
width: 100%;
height: 243.6px;
background:-webkit-linear-gradient(rgb(255,255,255),rgb(148,190,89) 70%);
background: -moz-linear-gradient(rgb(255,255,255),rgb(148,190,89) 70%);
background: -o-linear-gradient(rgb(255,255,255),rgb(148,190,89) 70%);
background: linear-gradient(rgb(255,255,255),rgb(148,190,89) 70%);
position: relative;
}
.cloud{
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background-color: #fff;
top: 80px;
left: 800px;
box-shadow: 0 0 5px #fff;
}
.cloud::before{
content: "";
position: absolute;
background-color: #fff;
border-radius: 50%;
height: 75px;
width: 90px;
left:-35px;
top:25px;
box-shadow: 0 0 5px #fff;
}
.cloud::after{
content: "";
position: absolute;
background-color: #fff;
border-radius: 100px;
height: 50px;
width: 165px;
top:40px;
left:-45px;
box-shadow: 0 0 5px #fff;
}
.others{
position: absolute;
}
.big{
animation:clouds 8s linear -1.5s infinite;
}
.medium{
opacity:.7;
animation: clouds 10s linear -2s infinite;
}
.small{
opacity:.5;
animation:clouds 12s linear -2.5s infinite;
}
.cloud:nth-of-type(2){
transform: scale(.8) translate(-250px,-100px);
}
.cloud:nth-of-type(3){
transform: scale(.8) translate(-150px,100px);
}
.cloud:nth-of-type(4){
transform: scale(.8) translate(400px,-70px);
}
.cloud:last-of-type{
transform: scale(.5) translate(220px,100px);
}
@keyframes clouds{
0%{
left: 1100px;
}
100%{
left:-400px;
}
}
</style>
</head>
<body>
<div class="sky">
<div class="cloud big"></div>
<div class="cloud others medium"></div>
<div class="cloud others medium"></div>
<div class="cloud others medium"></div>
<div class="cloud others small"></div>
</div>
<div class="grassland"></div>
</body>
</html>
1回答
-
好帮手慕星星
2019-09-06
同学你好，
1、可能是由于动画从窗口外围飘入，所以导致页面渲染宽度过宽，建议设置body{overflow:hidden;}去掉滚动条。如下：
2、页面在垂直方向上没有全屏显示：
代码中设置蓝天与草地的高度是固定的，由于每个显示器的分辨率不同，高度也会不同，所以建议设置百分比，如下：
3、白云动画起始位置也可以修改成百分比：
自己再测试下，祝学习愉快！
0
相似问题