老师，我的动画出问题了
来源：2-14 项目作业
Jeremy_Li7
2019-12-20 12:24:20
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>2-14作业</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
overfloW:hidden;
}/*给整个html页面设置宽度，给body设置清除溢出*/
.sky{
width:100%;
height:60%;
background:-webkit-linear-gradient(0deg,rgb(255,255,255)3%,rgba(196,228,253,.1) 10%,rgba(196,228,253,.5) 50%,rgba(196,228,253,1) 100%);
background:-moz-linear-gradient(0deg,rgb(255,255,255)3%,rgba(196,228,253,.1) 10%,rgba(196,228,253,.5) 50%,rgba(196,228,253,1) 100%);
background:-o-linear-gradient(0deg,rgb(255,255,255)3%,rgba(196,228,253,.1) 10%,rgba(196,228,253,.5) 50%,rgba(196,228,253,1) 100%);
background:linear-gradient(0deg,rgb(255,255,255)3%,rgba(196,228,253,.1) 10%,rgba(196,228,253,.5) 50%,rgba(196,228,253,1) 100%);
position:relative;
top:0;
z-index:0;
}/*给天空设置渐变色，绝对定位*/
.earth{
width:100%;
height:40%;
background:-webkit-linear-gradient(rgba(148,190,89,.1) 10%,rgba(148,190,89,.5) 50%,rgba(148,190,89,1) 100%);
background:-moz-linear-gradient(rgba(148,190,89,.1) 10%,rgba(148,190,89,.5) 50%,rgba(148,190,89,1) 100%);
background:-o-linear-gradient(rgba(148,190,89,.1) 10%,rgba(148,190,89,.5) 50%,rgba(148,190,89,1) 100%);
background:linear-gradient(rgba(148,190,89,.1) 10%,rgba(148,190,89,.5) 50%,rgba(148,190,89,1) 100%);
position:absolute;
bottom:0;
z-index:0;
}/*给草地设置渐变色，绝对定位*/
.cloud{
width:150px;
height:120px;
border-radius:50%;
background:#fff;
position:absolute;
z-index:1;
top:100px;
}/*设置每一个云朵的主体*/
.cloud:before,.cloud:after{
content:"";
display:block;
position:absolute;
background:#fff;
}/*设置两个小云朵的格式，内容为空，转成块，背景颜色，绝对定位*/
.cloud:before{
width:70px;
height:60px;
border-radius:40px/30px 30px 40px 40px;
left:90px;
bottom:0px;
z-index:2;
opacity:1;
}/*设置小云朵1的宽高和圆角，绝对定位，调整位置和透明度*/
.cloud:after{
width:100px;
height:70px;
border-radius:40px/30px 30px 40px 40px;
left:-35px;
bottom:18px;
z-index:3;
opacity:.8;
}/*设置小云朵2的宽高和圆角，绝对定位，调整位置和透明度*/
.one{
animation:oneplus 15s linear infinite normal;
}/*分别给每个云朵设置animation*/
.two{
transform:scale(.8);
animation:twoplus 19s linear infinite normal;
}/*选择性的给云朵设置变形，调整位置*/
.three{
transform:scale(.8);
animation:threeplus 20s linear infinite normal;
}
.four{
transform:scale(.8);
opacity:.6;
animation:fourplus 23s linear infinite normal;
}
.five{
transform:scale(.5) rotate(20deg);
animation:fiveplus 25s linear infinite normal;
}
-webkit-@keyframes oneplus{
0% {
left:110%;
top:100px;
}
50% {
left:50%;
top:100px;
}
100% {
left:-10%;
top:100px;
}
}/*分别调整不同动画的关键帧*/
@keyframes oneplus{
0% {
left:110%;
top:100px;
}
50% {
left:50%;
top:100px;
}
100% {
left:-10%;
top:100px;
}
}/*分别调整不同动画的关键帧*/
@keyframes twoplus{
0% {
left:115%;
top:15px;}
50% {
left:50%;
top:15px;}
100%{
left:-15%;
top:15px;}
}
@keyframes threeplus{
0% {
left:115%;
top:100px;}
50% {
left:50%;
top:100px;}
100%{
left:-15%;
top:100px;}
}
@keyframes fourplus{
0% {
left:115%;
top:200px;}
50% {
left:50%;
top:200px;}
100%{
left:-15%;
top:200px;}
}
@keyframes fiveplus{
0% {
left:115%;
top:100px;}
50% {
left:50%;
top:100px;}
100%{
left:-15%;
top:100px;}
}
.earth img{
width:300px;
height:288px;
position:absolute;
bottom:50px;
right:200px;
z-index:1;
}/*对插入的图片调成大小，调整位置*/
</style>
</head>
<body>
<div class="sky">
<div class="cloud one"></div>
<div class="cloud two"></div>
<div class="cloud three"></div>
<div class="cloud four"></div>
<div class="cloud five"></div>
</div>
<div class="earth"><img src="rabbit.png"></div>
</body>
</html>写回答
3回答
-
好帮手慕慕子
2019-12-20
同学你好， 对于你的问题解答如下：
老师测试你的动画效果是可以实现的， 修改代码后，需要保存文件， 再刷新浏览器测试。
由于浏览器存在缓存问题，建议：清除浏览器缓存之后，再测试一下。
没有div:after:after这种写法。
同学完整作业后可以提交作业，批作业的老师会针对你得作业，给出详细的修改建议，并整理成文档，发送给同学，方便同学查看与修改
如果帮助到了你，欢迎采纳，祝学习愉快~
0 -
Jeremy_Li7
提问者
2019-12-20
老师，我还有一个问题，对于伪类来说，可不可以有div:after:after的套娃式语法啊
0 -
Jeremy_Li7
提问者
2019-12-20
老师，为什么我在css里把关键帧的位置改了，但是在实际的网页中不起作用呢，要是按F12的话，在网页自带的css里可以修改，这是怎么回事啊?
0
相似问题