2,099
社区成员
发帖
与我相关
我的任务
分享
@keyframes animation{
0%{
background: red;/*设置不同的样式*/
}
50%{
background: blue;/*设置不同的样式*/
}
100%{
background: green;/*设置不同的样式*/
}
}
<div class="sky">
<div class="cloud_one"></div>
<div class="cloud_two"></div>
<div class="cloud_three"></div>
</div>
.sky{
height: 500px;
background: #007fd5;
overflow: hidden;
position: relative;
animation: sky1 50s ease-out infinite;
}
.cloud_one,.cloud_two,.cloud_three{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 300%;
}
.cloud_one{
background: url(../img/cloud_one.png);
animation: clouds 50s linear infinite;
}
.cloud_two{
background: url(../img/cloud_two.png);
animation: clouds 60s linear infinite;
}
.cloud_three{
background: url(../img/cloud_three.png);
animation: clouds 80s linear infinite;
}
@keyframes sky1{
0%{
background: #007fd5;
color: #007fd5;
}
50%{
background: #000;
color: #a3d9ff;
}
100%{
background: #007fd5;
color: #007fd5;
}
}
@keyframes clouds{
0%{
left: 0;
}
100%{
left: -200%;
}
}