本文摘自PHP中文网，作者不言，侵删。
相信大家都曾在网站中看到过中效果，一打开页面，无论是文字还是图片，都随着规定时间的而变化，今天我们将介绍如何通过用纯CSS来实现这种效果，下面一起来看看。大家可能经常会看到酷炫的网站
在这类网站中能看到，一打开页面，无论是文字还是图片，都随着规定时间的而变化。原理很简单，主要用到CSS中animation属性。
接下来，我以我目前的工程项目为例，实现文字和图片的动画效果。
HTML代码编写：
复制代码
代码如下:
1 2 3 4 5 |
|
目前大体的框架已经写好，包含一个section标签，span（根据喜好添加）,h2标签。接下来向其中添加文字代码。将代码放在h2中。
复制代码
代码如下:
1 2 3 4 5 |
|
第一种文字动画HTML。
复制代码
代码如下:
1 2 3 4 |
|
第二种文字动画HTML。
复制代码
代码如下:
1 2 3 4 5 |
|
图片变换效果，如上GIF的展示。图片从右滑动并更替。
ok,至此HTML代码搞定，现在来实现最核心的部分：CSS设置动画及字体样式。
CSS代码编写
复制代码
代码如下:
1 2 3 4 5 6 7 |
|
这里顺带一讲，perspective 属性定义 3D 元素距视图的距离，以像素计。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。数字800px代表元素距离视图的距离。-moz代表firefox浏览器私有属性，-ms代表IE浏览器私有属性，-webkit代表chrome、safari私有属性，-o代表opera浏览器私有属性.
复制代码
代码如下:
1 2 3 4 |
|
对于具体的<span>标签位置设置根据实际情况设置。
复制代码
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
