运用纯CSS完成动态性的文本实际效果案例

2021-03-18 14:15 jianzhan

大伙儿将会常常会看到相近炫酷的网站:

在这类网站中能看到,1开启网页页面,不管是文本還是照片,都伴随着要求時间的而转变。基本原理很简易,关键用到CSS中animation特性。

接下来,我以我现阶段的工程项目新项目为例,完成文本和照片的动漫实际效果。(实际效果如上图GIF)

HTML编码撰写:

拷贝编码
编码以下:

<section class="rw-wrapper">
<span class="span-title">文本题型</span>
<h2 class="rw-sentence">
</h2>
</section>

现阶段大致的架构早已写好,包括1个section标识,span(依据爱好加上),h2标识。接下来向在其中加上文本编码。将编码放在h2中。


拷贝编码
编码以下:

<div class="rw-words rw-words⑴">
<span>內容1</span>
<span>內容2</span>
...
</div>

第1种文本动漫HTML。


拷贝编码
编码以下:

<div class="rw-words rw-words⑵">
<span>內容1</span>
...
</div>

第2种文本动漫HTML。


拷贝编码
编码以下:

//同理
<div class="rw-words rw-words⑶">
<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;
}

这里顺便1讲,perspective 特性界定 三d 元素距主视图的间距,以像素计。当为元素界定 perspective 特性时,其子元素会得到透視实际效果,而并不是元素自身。数据800px意味着元素间距主视图的间距。-moz意味着firefox访问器独享特性,-ms意味着IE访问器独享特性,-webkit意味着chrome、safari独享特性,-o意味着opera访问器独享特性.


拷贝编码
编码以下:

.rw-words span{
white-space:nowrap; //文本不容许换行
overflow:hidden;
}

针对实际的<span>标识部位设定依据具体状况设定。


拷贝编码
编码以下:

.rw-words⑴ 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 是全部动漫进行1次的時间,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⑵ 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⑶ 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有一定的协助。