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

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

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

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

HTML代码编写：

复制代码

代码如下:
<section class="rw-wrapper">
<span class="span-title">文字题目</span>
<h2 class="rw-sentence">
</h2>
</section>

目前大体的框架已经写好，包含一个section标签，span（根据喜好添加）,h2标签。接下来向其中添加文字代码。将代码放在h2中。

复制代码

代码如下:
<div class="rw-words rw-words-1">
<span>内容1</span>
<span>内容2</span>
...
</div>

第一种文字动画HTML。

复制代码

代码如下:
<div class="rw-words rw-words-2">
<span>内容1</span>
...
</div>

第二种文字动画HTML。

复制代码

代码如下:
//同理
<div class="rw-words rw-words-3">
<span><img src="图片路径" width="XX" height="XX"></span>
...
</div>

图片变换效果，如上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;
}

上一篇：使用纯css截断多行文本

下一篇：利用CSS3实现自定义滚动条代码分享

发表评论

共有条评论