请问为什么所有云从左边开始飘过去呢？第五多云卡在中间白色的部分不动
代码复制过来会自动删除一些class为什么呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.main{margin:0;padding:0;width:100%;height:100vh; position:relative;
}
.sky{
width:100%;height:60%;background:linear-gradient(rgb(196, 228, 253) 60%,white 100%);
}
.grass{
width:100%;height:40%;background:linear-gradient(white 5%,rgb(148, 190, 89) 100%);
}
.cloud{
position:relative;width:120px;height:40px;background:#FFFFFF;border-radius:20px;top:-300px;float:left;
}
.cloud::before{
position:absolute;width:60px;height:40px;background:#FFFFFF;border-radius:20px;content:"";transform:rotate(60deg);left:5px;top:-5px;
}
.cloud::after{
position: absolute;width: 70px;height: 70px;background:#FFFFFF;border-radius:70px;content:"";left:40px;top:-27px;
}
div.cloud2{
background:#FFFFFF;transform:scale(.9);
-webkit-animation:cloud 15s linear infinite;
-moz-animation:cloud 15s linear infinite;
-ms-animation:cloud 15s linear infinite;
-o-animation:cloud 15s linear infinite;
animation:cloud 15s linear infinite;
}
div.cloud3{
background:#FFFFFF;transform:scale(.9);
-webkit-animation:cloud 11s linear infinite;
-moz-animation:cloud 11s linear infinite;
-ms-animation:cloud 11s linear infinite;
-o-animation:cloud 11s linear infinite;
animation:cloud 11s linear infinite;
}
div.cloud4{
background:#FFFFFF;transform:scale(.6);
-webkit-animation:cloud 10s linear infinite;
-moz-animation:cloud 10s linear infinite;
-ms-animation:cloud 10s linear infinite;
-o-animation:cloud 10s linear infinite;
animation:cloud 10s linear infinite;
}
div.cloud5{
background:#FFFFFF;transform:scale(.85);
-webkit-animation:cloud 8s linear infinite;
-moz-animation:cloud 8s linear infinite;
-ms-animation:cloud 8s linear infinite;
-o-animation:cloud 8s linear infinite;
animation:cloud 8s linear infinite;
}
div.rabbit{
position:absolute;
left:400px;
transform:scale(.2);
}
-webkit-@keyframes cloud{
from{margin-left:100%;}
to{margin-right:-100%;}
}
-moz-@keyframes cloud{
from{margin-left:100%;}
to{margin-right:-100%;}
}
-ms-@keyframes cloud{
from{margin-left:100%;}
to{margin-right:-100%;}
}
-o-@keyframes cloud{
from{margin-left:100%;}
to{margin-right:-100%;}
}
@keyframes cloud{
from{margin-left:100%;}
to{margin-right:-100%;}
}
</style>
</head>
<body>
<div class="main">
<div class="rabbit">
<img src="../新建文件夹/小白兔图片/rabbit.png">
</div>
<div class="sky"></div>
<div class="grass"></div>
<div class="cloud">
<div class="cloud x2 cloud2"></div>
<div class="cloud x3 cloud3"></div>
<div class="cloud x4 cloud4"></div>
<div class="cloud x5 cloud5"></div>
</div>
</div>
</body>
</html>
正在回答
云是从右向左飘的，这与定义的动画：
from{margin-left:100%;}
to{margin-right:-100%;}
是一致的呀。至于第五朵云，你定义的类名为cloud5的div是不是第5个云????
你好，根据你的代码分析：
1. 所描述的第五朵云是如下：
<div class="cloud"> /*这个是第五多云*/ <div class="cloud x2 cloud2"></div> <div class="cloud x3 cloud3"></div> <div class="cloud x4 cloud4"></div> <div class="cloud x5 cloud5"></div> </div>
在 css 样式中并没有设置 它的动画，只给cloud2......cloud5 设置了 animation 。
建议修改：
<div class="clouds"> /* 里面的五个div 可以看做五朵云*/ <div class="cloud x1 cloud1"></div> <div class="cloud x2 cloud2"></div> <div class="cloud x3 cloud3"></div> <div class="cloud x4 cloud4"></div> <div class="cloud x5 cloud5"></div> </div>
2. 兼容性写法错误 -webkit-@keyframes 应该是@ -webkit-keyframes。
动手实践下，希望对你有帮助，如解决你的疑惑，请采纳呦。
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星