CSS3空中白云飘动动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3空中白云飘动动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
    <head>
        <meta charset="gb2312">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>CSS3空中白云飘动动画特效</title>
        <style type="text/css">
        * { margin: 0; padding: 0; border: 0; } 
	        html,body{
	        	margin: 0;
	        }
	        @-webkit-keyframes STAR-MOVE {
				from {
					background-position:0% 0%
				}
				to { 
					background-position: 600% 0%
				}
			}
			 @keyframes STAR-MOVE {
				from {
					background-position: 0% 0%
				}
				to { 
					background-position: 600% 0%
				}
			}
			.wall{
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				
			}
			div#background{
				background: black url('img/background.png') repeat-x 5% 0%;
				background-size: cover;
				-webkit-animation: STAR-MOVE  200s linear infinite;
				-moz-animation: STAR-MOVE  200s linear infinite;
				-ms-animation: STAR-MOVE  200s linear infinite;
				animation: STAR-MOVE  200s linear infinite;
			}
			div#midground{
				background:url('img/midground.png')repeat 20% 0%;
				z-index: 1;
				-webkit-animation: STAR-MOVE  100s linear infinite;
				-moz-animation: STAR-MOVE  100s linear infinite;
				-ms-animation: STAR-MOVE  100s linear infinite;
				animation: STAR-MOVE  100s linear infinite;
			}
			div#foreground{
				background:url('img/foreground.png')repeat 35% 0%;
				z-index: 2;
				-webkit-animation: STAR-MOVE  50s linear infinite;
				-moz-animation: STAR-MOVE  50s linear infinite;
				-ms-animation: STAR-MOVE  50s linear infinite;
				animation: STAR-MOVE  50s linear infinite;
			}
        </style>
    </head>
    <body>
        <div id="background" class="wall"></div>
        <div id="midground" class="wall"></div>
        <div id="foreground" class="wall"></div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)