应用纯CSS实现动态的文字结果实例
大家大概经常会看到酷炫的网站
在这类网站中能看到，一翻开页面，不管是文字还是图片，都随着规按时间的而转变。道理很简便，主要用到CSS中animation属性。
接下来，我以我当前的工程项目为例，实现文字和图片的动画结果。
HTML代码编写：
复制代码
代码如下:
<section class="rw-wrapper"> <span class="span-title">文字问题</span> <h2 class="rw-sentence"> </h2> </section>
当前大体的框架已经写好，包括一个section标签，span（按照喜欢增加）,h2标签。接下来向其中增加文字代码。将代码放在h2中。
复制代码
代码如下:
<p class="rw-words rw-words-1"> <span>内容1</span> <span>内容2</span> ... </p>
第一种文字动画HTML。
复制代码
代码如下:
<p class="rw-words rw-words-2"> <span>内容1</span> ... </p>
第二种文字动画HTML。
复制代码
代码如下:
//同理 <p class="rw-words rw-words-3"> <span><img src="图片途径" width="XX" height="XX"></span> ... </p>
图片变换结果，如上GIF的展现。图片从右滑动并更替。
ok,至此HTML代码搞定，此刻来实现最中心的部分：CSS设定动画及字体样式。
CSS代码编写
复制代码
代码如下:
.rw-words{
-webkit-perspective:800px;
-moz-perspective:800px;
-o-perspective:800px;
-ms-perspactive:800px;
perspactive:800px;
}这里顺带一讲，perspective 属性定义 3D 元素距视图的间隔，以像素计。当为元素定义 perspective 属性时，其子元素会获得透视结果，而不是元素本身。数字800px代表元素间隔视图的间隔。-moz代表firefox阅读器私有属性，-ms代表IE阅读器私有属性，-webkit代表chrome、safari私有属性，-o代表opera阅读器私有属性.
复制代码
代码如下:
.rw-words span{
white-space:nowrap; //文字不同意换行
overflow:hidden;
}关于详细的<span>标签位置设定按照实际状况设定。
复制代码
代码如下:
.rw-words-1 span{
-webkit-animation: rotateWordsFirst 10s linear infinite 0s;
-o-animation: rotateWordsFirst 10s linear infinite 0s;
-moz-animation: rotateWordsFirst 10s linear infinite 0s;
-ms-animation: rotateWordsFirst 10s linear infinite 0s;
animation:rotateWordsFirst 10s linear infinite 0s;
}这里使用动画结果！第一rotateWordsFirst是动画的名称，10s 是整个动画完成一次的时间，linear是使用的时间曲线，infinite反复次数无穷。
关于animation语法：
复制代码
代码如下:
animation: name duration timing-function delay iteration-count direction;
animation-name：规定需要绑定到选中器的 keyframe 名称。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function ：规定动画的速度曲线。
animation-delay ：规定在动画开端此前的延迟。
animation-iteration-count ：规定动画应当播放的次数（ infinite无穷轮播 ）
animation-direction ：规定可否应当轮番反向播放动画。
想要更多理解的，搜索：CSS系列之animationi.
接下来，animation的另一种。
复制代码
代码如下:
.rw-words-2 span{
-webkit-animation: rotateWordsFirst 10s ease-in infinite 0s;
-o-animation: rotateWordsFirst 10s ease-in infinite 0s;
-moz-animation: rotateWordsFirst 10s ease-in infinite 0s;
-ms-animation: rotateWordsFirst 10s ease-in infinite 0s;
animation:rotateWordsFirst 10s ease-in infinite 0s;
}ease-in说明：
ease 规定慢速开端，然后变快，然后慢速完毕的过渡结果; ease-in 规定以慢速开端的过渡结果; ease-out 规定以慢速完毕的过渡结果; ease-in-out 规定以慢速开端和完毕的过渡结果（这几种结果大家都可以尝试）
同理，对.rw-words-3 span可以用一样的方式设定。
复制代码
代码如下:
.rw-words span：nth-child(1){
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}:nth-child(n) 选中器匹配属于其父元素的第 N 个子元素，不管元素的类型。n 可以是数字、关键词或公式。
复制代码
代码如下:
.rw-words span:nth-child(n) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
...设定不一样的选中器，来实现文字之间的显示延迟。
复制代码
代码如下:
@-webkit-keyframes rotateWordsFirst/second {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
//此属性查看animation
5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; } //设定不透亮级别
20% { opacity: 0; }
100% { opacity: 0; }
}keyframes对每一个动画定义时间轴，可以设定某个时间动画作用的元素是啥状态。与animation配合使用。
然后写出各个阅读器的适配，如-o,-moz,-ms等。
除了animation属性，各位还可以试试transform属性的使用，可以实现文字及其图像的扭转，缩放等结果，以上就是利用纯CSS实现动态的文字结果的全部内容，但愿能对大家学习使用CSS有所帮忙。
相关引荐：
CSS 文本字体色彩设定办法(CSS color)
以上就是利用纯CSS实现动态的文字结果实例的具体内容，更多请关注百分百源码网其它相关文章！
