利用纯CSS实现动态的文字效果实例

大家可能经常会看到酷炫的网站

在这类网站中能看到，一打开页面，无论是文字还是图片，都随着规定时间的而变化。原理很简单，主要用到CSS中animation属性。

接下来，我以我目前的工程项目为例，实现文字和图片的动画效果。

HTML代码编写：

复制代码

代码如下:

 section >
目前大体的框架已经写好，包含一个section标签，span（根据喜好添加）,h2标签。接下来向其中添加文字代码。将代码放在h2中。
复制代码
代码如下:
 p >
第一种文字动画HTML。
复制代码
代码如下:
 p >
第二种文字动画HTML。
复制代码
代码如下:
//同理 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;}//此属性查看animation5% { 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实现动态的文字效果实例的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。