CSS3动画animation实现漂浮的云

实现的图像动画效果大致是这样的:云彩向左滚动


图片效果链接  点击打开链接

【代码效果】

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3动画animation实现漂浮的云—HTML5自由者</title>
	<style type="text/css">
	html,body {
		padding: 0;
		margin: 0;
	}
	.wrap {
		height: 190px;
		width: 600px;
		margin: 150px auto 0;
		background: url('bg-clouds.png');
		-webkit-animation:cloud 40s linear infinite;   
		-o-animation:cloud 40s linear infinite; 
	}
	@-webkit-keyframes cloud {
		from{background-position:0% 0%}
		  to{background-position:50% 50%}
	}
	</style>
</head>
<body>
	<div class="wrap"></div>
</body>
</html>

【用到的素材】



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huangyibin628/article/details/23304403
个人分类: CSS3 HTMl5
所属专栏: HTML5自由者
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭