设置高度=6:4 我设置为600px:400px l浏览器出现滚动条，伪元素怎么绑定在每个子div中

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兔子案例</title>
<style>
*{
padding:0px;
margin:0px;
}
.sky{
position:relative;
width:100%;
height:600px;
background:-webkit-linear-gradient(rgba(196, 228, 253),rgba(255,255,255));
background:-moz-linear-gradient(rgba(196, 228, 253),rgba(255,255,255));
background:-ms-linear-gradient(rgba(196, 228, 253),rgba(255,255,255));
background:-o-linear-gradient(rgba(196, 228, 253),rgba(255,255,255));
background:linear-gradient(rgba(196, 228, 253),rgba(255,255,255));
}
.sky > .cloud1{
z-index:5;
width:100px;
height:100px;
position:absolute;
left:150px;
background:#fff;
border-radius:50%;
animation:cloud1 10s linear infinite normal;
}
.sky > .cloud2{
z-index:4;
width:100px;
height:100px;
position:absolute;
left:150px;
top:100px;
background:#fff;
border-radius:50%;
animation:cloud2 10s linear infinite normal;
opacity:0.8;
}
.sky > .cloud3{
z-index:3;
width:100px;
height:100px;
position:absolute;
left:100px;
top:100px;
background:#fff;
border-radius:50%;
animation:cloud3 10s linear infinite normal;
opacity:0.6;
}
.sky > .cloud4{
z-index:2;
width:100px;
height:100px;
position:absolute;
left:200px;
top:100px;
background:#fff;
border-radius:50%;
animation:cloud4 13s linear infinite normal;
opacity:0.7;
}
}
.sky >.cloud5{
z-index:1;
width:100px;
height:100px;
position:absolute;
left:200px;
top:150px;
background:#fff;
border-radius:50%;
animation:cloud5 13s linear infinite normal;
opacity:0.9;
}
}
.sky > div:before{
content: "";
    width: 160px;
    height: 50px;
    position: absolute;
    left: 50px;
    top: 43px;
    transform: translate(-60%,0);
    background: #fff;
    border-radius:48px;
 
}
.sky > div:after{
content: "";
    width: 75px;
    height: 50px;
    position: absolute;
    left: 50px;
    top: 38px;
    transform: translate(-116%,0) rotate(80deg);
    background: #fff;
    border-radius: 50px;
} 
.grassland{
position:relative;
width:100%;
height:400px;
background:-webkit-linear-gradient(rgba(255,255,255),rgba(148, 190, 89));
background:-moz-linear-gradient(rgba(255,255,255),rgba(148, 190, 89));
background:-ms-linear-gradient(rgba(255,255,255),rgba(148, 190, 89));
background:-o-linear-gradient(rgba(255,255,255),rgba(148, 190, 89));
background:linear-gradient(rgba(255,255,255),rgba(148, 190, 89));
  
}
.rabbit{
position:absolute;
height:200px;
width:200px;
bottom:50px;
right:200px;
background-image:url(image/rabbit.png);
background-size: 200px 200px;
}
@keyframes cloud1{
0%{left:105%;}
100%{left:-90%;}
}
@keyframes cloud2{
0%{left:105%;transform:scale(1.2,1.2);}
100%{left:-75%;transform:scale(1.2,1.2);}
}
@keyframes cloud3{
0%{left:105%;transform:scale(0.7,0.7);}
100%{left:-100%;transform:scale(0.7,0.7);}
}
@keyframes cloud4{
0%{left:105%;transform:scale(1.2,1.2);}
100%{left:-75%;transform:scale(1.2,1.2);}
}
@keyframes cloud5{
0%{left:105%;transform:scale(0.7,0.7);}
100%{left:-100%;transform:scale(0.7,0.7);}
}
</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 class="grassland">
<div class="rabbit"></div>
</div>
</body>
</html>

老师为什么会出现这样的问题呢？

高度比不会：
怎么设置每个子div绑定动画效果呢
怎么清楚这个伪元素呢难道要一个个设置每个子div吗

再坚持坚持一下 2019-05-19

源自：项目：CSS3实现汉克狗案例 2-14 项目作业

收起

1回答

好帮手慕夭夭 2019-05-19 14:22:22

你好同学，解答如下：

因为页面的元素设置固定宽度总共为1000px，但是浏览器的高度并没有那么高的时候，就会出现滚动条。并且，由于云朵默认位置是超出屏幕的，所以也会出现横向滚动条。
竖向滚动条解决方式：高度建议使用百分比，这样让页面的高度永远相对浏览器100%显示。百分比需要参照父元素计算，所以父元素先设置一下高度
页面内容高度：

横向滚动条解决方式：为页面设置超出内容隐藏。
代码中已经给每一个div绑定动画效果了。不知道同学具体哪里有疑惑，可以再详细描述一下，以便老师准确的为你解答。另外，几个云朵可以共用一个动画效果的。
如下：
每一个云朵都使用这个动画，透明度不需要设置，云朵的缩放不要放在动画里面，直接在默认的样式中设置即可，调整一下动画时间，让每一个云朵时间拉开一点差距：
当然，云朵的动画时间不一定按照老师给出的去设置，自己适当的调整就行
同学说的清除伪元素是什么意思，这里不需要清除伪元素。第二个问题中，把多余的符号去掉，伪元素的效果就能解析，云朵的形状已经设置的很不错了。如果还有疑问，可以详细描述一下，以便老师帮助你准确的解答。
祝学习愉快，望采纳。

收起回答

提问者再坚持坚持一下 #1

谢谢老师整改，没想到可以一个keyframes应用到多个子div中，可能是多写了{} 导致伪元素存在问题谢谢老师的引导

2019-05-19 15:03:35
提问者再坚持坚持一下 #2

题中要求是要为云朵设置阴影效果的啊所以要设置opacity 老师您怎么说不用设置那个opacity 设置呢

2019-05-19 15:05:25
好帮手慕夭夭 #3

很抱歉同学，因为老师看效果视频中的云朵没有看出来透明度，所以就让同学去掉透明度的设置。后面确实要求了，这里同学可以设置透明度的，给同学带来的困扰请谅解。

2019-05-19 17:39:27