我的动画，不能从右侧进入，云彩定位个漂亮的位置就可以吗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>一幅美丽的蓝天白云绿草，小兔嬉耍的美景</title>
<!-- <link rel="stylesheet" href="./css/index.css"> -->
<style>
/* 公共样式 */
* {
margin: 0;
padding: 0;
}
/* 蓝天css样式 */
.blue-sky {
height: calc(60vh);
background: linear-gradient(rgb(196, 228, 253) 0%, #fff 100%);
}
/* 草地css样式 */
.meadom {
position: relative;
height: calc(40vh);
background: linear-gradient(#fff 0%, rgb(148, 190, 89) 100%);
}
/* 云css样式 */
/* 云的实现思路：一个云彩由三部分组成，所以一个div一个云彩，先把div写成一个横向的椭圆，然后使用before和after
分别绘制左边的椭圆和右边的圆形，然后结合定位，让两个图形叠加在横向的椭圆上面即可 */
.cloud {
position: absolute;
width: 160px;
height: 60px;
border-radius: 50%;
background: #fff;
transform: scale(.6);
}
.cloud:before {
position: absolute;
top: 0px;
left: 0px;
content: ' ';
width: 90px;
height: 60px;
border-radius: 50%;
background: #fff;
transform: rotate(60deg);
}
.cloud:after {
position: absolute;
top: -33px;
left: 48px;
content: ' ';
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
}
.cloud-one {
top: 9px;
left: 30px;
background: rgba(255, 255, 255, .7);
-webkit-animation: mymove 5s linear infinite;
animation: mymove 5s linear infinite;
transform: scale(.3)
}
.cloud-one:before,
.cloud-one:after {
background: rgba(255, 255, 255, .7)
}
.cloud-two {
top: 76px;
left: 30px;
background: rgba(255, 255, 255, .8);
transform: scale(.9);
-webkit-animation: mymove 10s linear infinite;
animation: mymove 10s linear infinite;
}
.cloud-two:before,
.cloud-two:after {
background: rgba(255, 255, 255, .8)
}
.cloud-three {
top: 30px;
left: 230px;
background: rgba(255, 255, 255, .5);
transform: scale(.6);
-webkit-animation: mymove 8s linear infinite;
animation: mymove 8s linear infinite;
}
.cloud-three:before,
.cloud-three:after {
background: rgba(255, 255, 255, .5)
}
.cloud-four {
top: 100px;
left: 130px;
background: rgba(255, 255, 255, .9);
transform: scale(.5);
-webkit-animation: mymove 12s ease-in-out infinite;
animation: mymove 12s ease-in-out infinite;
}
.cloud-five {
top: 7px;
left: 118px;
background: rgba(255, 255, 255, .8);
transform: scale(.7);
-webkit-animation: mymove 7s ease-in infinite;
animation: mymove 7s ease-in infinite;
}
@keyframes mymove {
form {
left: 100%;
}
to {
left: -100%;
}
}
@-webkit-keyframes mymove {
form {
left: 100%;
}
to {
left: -100%;
}
}
/* 小兔子样式 */
.rubbit {
position: absolute;
right: 200px;
bottom: 50px;
}
.rubbit img {
width: 120px;
}
</style>
</head>
<body>
<!-- 蓝天 -->
<div class="blue-sky">
<!-- 云 -->
<div class="cloud cloud-one"></div>
<div class="cloud cloud-two"></div>
<div class="cloud cloud-three"></div>
<div class="cloud cloud-four"></div>
<div class="cloud cloud-five"></div>
</div>
<!-- 草地 -->
<div class="meadom">
<!-- 小兔子 -->
<div class="rubbit">
<img src="./img/rabbit.png" alt="">
</div>
</div>
</body>
</html>
正在回答
同学你好，动画不能从右侧进入是开始动画帧的问题，单词错了，应该是from，form是表单。参考修改
另外设置left值为100%，云朵超出视口，水平方向上会出现滚动条。可以给body设置超出隐藏：
自己再测试下，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星