利用纯CSS实现动态的文字效果实例(2)-木庄网络博客

代码如下:

.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语法：

复制代码

代码如下:

1	`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有所帮助。