H5
##这是一个 网页
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本动画，云漂浮</title>
<style >
*{margin: 0;padding: 0;overflow: hidden;}
html,body{width: 100%;height: 100%;}
.sky_panel{
height: 500px;
width: 100%;
background-color: #007AFF;
animation: skychange 60s linear infinite;
}
@keyframes skychange{
0%{
background-color: #007AFF;
}
50%{background-color: #000000;
}
100%{
background-color: #007AFF;
}
}
.sky_panel>div{
position: absolute;
}
.sky_panel>.cloud-1{
height: 100%;
width: 300%;
background-image: url(../img/cloud/cloud_one.png);
animation:cloudmove 40s linear infinite;
/* 直线反复 */
/* animation: xxx yyy zzz ooo;
执行过程()单独过程体实现 执行时间 运动轨迹效果 运行次数*/
}
@keyframes cloudmove{
/* from{
left: 0;
}
to{
left: -100%;
} */
/* 写法2
0%{}
1%{}
50%
.....
*/
0%{
left: 0;
}
50%{
left: -100%;
}
100%{
left: 0%;
}
}
.sky_panel>.cloud-2{
height: 100%;
width: 300%;
background-image: url(../img/cloud/cloud_tow.png);
animation:cloudmove 50s linear infinite;
}
.sky_panel>.cloud-3{
height: 100%;
width: 300%;
background-image: url(../img/cloud/cloud_three.png);
animation:cloudmove 60s linear infinite;
}
/* .box{
height: 100px;
width: 100px;
background-color: #2AC845;
animation: san 2s linear infinite;
}
@skyf */
</style>
</head>
<body>
<div class="sky_panel">
<div class="cloud-1"></div>
<div class="cloud-2"></div>
<div class="cloud-3"></div>
<!-- <div class="box"></div> -->
</div>
</body>
</html>
效果图：
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
