CSS3动画animation实现漂浮的云

最新推荐文章于 2023-07-08 18:07:52 发布

一喵呜

最新推荐文章于 2023-07-08 18:07:52 发布

阅读量1w

点赞数 3

分类专栏： CSS3 HTMl5 HTML5自由者文章标签： HTML5自由者黄艺斌 HTML5新标签 animation动画 CSS3动画实现云朵飘移

本文链接：https://blog.csdn.net/html5_/article/details/23304403

版权

HTML5自由者同时被 3 个专栏收录

94 篇文章 13 订阅

订阅专栏

HTMl5

81 篇文章 0 订阅

订阅专栏

CSS3

35 篇文章 0 订阅

订阅专栏

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

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

【代码效果】

<!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>

【用到的素材】