CSS3 中 Animation 动画示例漂浮的云 - 文章教程

CSS3 中 Animation 动画示例漂浮的云

发布于 2018-02-13 字数 1381 浏览 3312 评论 0

背景动画如果用的恰当,会给网页带来意想不到的效果。在过去我们只能用 Flash 或 JavaScript 来实现。幸运的是,CSS3 的流行使得我们完全可以使用它来实现这种效果,不再依赖其它编程技术,一段简单的 CSS 代码就能轻而易举的达到下面的效果。

CSS3 中 Animation 动画示例漂浮的云

这种背景动画是通过移动背景图的位置实现的,这里没有使用CSS3的transition,而是用animation

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

上面是动画定义,下面就要把它应用到一个具有背景图的页面元素上:

#animate-area	{ 
	width: 560px; 
	height: 400px; 
	background-image: url(bg-clouds.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;
	animation: animatedBackground 40s linear infinite;
}

背景云图片以 40 秒一次的速度顺滑优雅的从左漂移到右,而且无缝的和下一次循环对接,这样无限循环漂浮下去。

不再需要 JavaScript 来操作动画是一件多么让人欣慰的事,虽然这些 CSS 写法上还需要加一些浏览器引擎兼容前缀,看起来很讨厌,但至少比以前高效多了,而且易于配置。

英文原文:davidwalsh

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

3094 文章
评论
84935 人气
更多

推荐作者

qq_pH6xKF

文章 0 评论

robert

文章 0 评论

南街九尾狐

文章 0 评论

北渚

文章 0 评论