检查代码看看是否有错误
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS布局</title> <link rel="stylesheet" href="../index.css/style4.css" type="text/css" /><!-- 引用css样式表，记住格式 --> </head> <body> <!-- 天空 --> <div class="bluesky"> <!-- 5朵白云 --> <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="ground"> <img src="../image/rabbit.png" alt="小兔子"> </div> </body> </html>
*{
margin: 0;
padding: 0;
}
/* 蓝天 */
.bluesky{
width: 100%;
height: 60vh;
/* vh是指窗口高度的百分比 */
position: relative;
background: linear-gradient(0deg,rgba(196, 228, 253,0.2) 10%,rgba(196, 228, 253,0.5) 40%,rgba(196, 228, 253,0.7) 60%,rgba(196, 228, 253,0.9) 80%);
overflow: hidden;
}
/* 5朵白云 */
.bluesky > .cloud{
width: 100px;
height: 100px;
background: #FFFFFF;
position: absolute;
float: left;
border-radius: 50%;
}
.bluesky > .cloud::before{
content: "";
display: block;
width: 60px;
height: 90px;
background: #FFFFFF;
position: absolute;
top: 20px;
left: -30px;
border-radius: 50%;
transform: rotate(-45deg);
}
.bluesky > .cloud::after{
content: "";
display: block;
width: 160px;
height: 57px;
background: #FFFFFF;
position: absolute;
top: 36px;
left: -50px;
border-radius: 60px;
}
.bluesky > .cloud.one{
position: absolute;
top: 0px;
right: 100px;
transform: scale(1.2);
opacity: 0.6;
animation: translate1 6s linear 0.5s infinite normal;
}
.bluesky > .cloud.two{
position: absolute;
top: 15px;
right: -500px;
transform: scale(1.3);
opacity: 0.7;
animation: translate2 8s linear 0.5s infinite normal;
}
.bluesky > .cloud.three{
position: absolute;
top: 120px;
right: -150px;
transform: scale(1.4);
opacity: 0.8;
animation: translate3 5s linear 0.5s infinite normal;
}
.bluesky > .cloud.four{
position: absolute;
top: 180px;
right: -300px;
transform: scale(1);
opacity: 0.5;
animation: translate4 10s linear 0.5s infinite normal;
}
.bluesky > .cloud.five{
position: absolute;
top: 240px;
right: -20px;
transform: scale(1.2);
opacity: 0.6;
animation: translate5 6s linear 0.5s infinite normal;
}
@keyframes translate1{
0% {right: 100px;}
100% {right: 100%;}
}
@keyframes translate2{
0% {right: -500px;}
100% {right: 100%;}
}
@keyframes translate3{
0% {right: -150px;}
100% {right: 100%;}
}
@keyframes translate4{
0% {right: -300px;}
100% {right: 100%;}
}
@keyframes translate5{
0% {right: -20px;}
100% {right: 100%;}
}
/* 草地 */
.ground{
width: 100%;
height: 40vh;
position: relative;
background: linear-gradient(180deg,rgba(196, 228, 253,0.2) 5%,rgba(148, 190, 89,0.3) 40%,rgba(148, 190, 89,0.5) 60%,rgba(148, 190, 89,0.7) 80%);
}
/* 兔子图片 */
.ground img{
width: 300px;
height: 300px;
position: absolute;
right: 200px;
bottom: 50px;
}有一个问题，是否能将5个keyframes合成一个呢，就是0%的时候，因为他们的位置我都设置好了，是否能将元素设置为保持当前状态，就是0%｛right：｝这里，或者说还有另一种方法？我试了设置fill-mode保持当前状态也不行，动画开始时还是会到0%设置的状态。
1
收起
正在回答
2回答
同学你好，不一样也是可以的，不过都从右边飘出来比较好。视频这个只是录制时候是在运行的过程，导致看起来是从屏幕中的哦。
希望能帮助到你，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星