这篇文章运用简单易懂的例子给大家介绍如何利用纯CSS实现动态的文字效果,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
目前创新互联建站已为成百上千的企业提供了网站建设、域名、雅安服务器托管、网站托管、企业网站设计、奈曼网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
相信大家都曾在网站中看到过中效果,一打开页面,无论是文字还是图片,都随着规定时间的而变化,今天我们将介绍如何通过用纯CSS来实现这种效果,下面一起来看看。
大家可能经常会看到酷炫的网站
在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化。原理很简单,主要用到CSS中animation属性。
接下来,我以我目前的工程项目为例,实现文字和图片的动画效果。
HTML代码编写:
复制代码
代码如下:
文字题目
目前大体的框架已经写好,包含一个section标签,span(根据喜好添加),h3标签。接下来向其中添加文字代码。将代码放在h3中。
复制代码
代码如下:
内容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; }
对于具体的标签位置设置根据实际情况设置。
复制代码
代码如下:
.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实现动态的文字效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。