利用纯CSS实现动态的文字效果实例,css 动态 文字
利用纯CSS实现动态的文字效果实例
易采站长站,站长之家为您整理了利用纯CSS实现动态的文字效果实例的相关内容。
大家可能经常会看到类似酷炫的网站:
在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化。原理很简单,主要用到CSS中animation属性。
接下来,我以我目前的工程项目为例,实现文字和图片的动画效果。(效果如上图GIF)
HTML代码编写:复制代码代码如下:
文字题目
目前大体的框架已经写好,包含一个section标签,span(根据喜好添加),h2标签。接下来向其中添加文字代码。将代码放在h2中。
复制代码代码如下:
内容1
内容2
...
第一种文字动画HTML。
复制代码代码如下:
内容1
...
第二种文字动画HTML。
复制代码代码如下://同理
...
图片变换效果,如上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;
}
对于具体的标签位置设置根据实际情况设置。
复制代码代码如下: