大家好芬膝，我是前端實(shí)驗(yàn)室的大師兄!
前言
CSS是一門很特殊的語(yǔ)言望门，你認(rèn)為CSS只能用來(lái)控制網(wǎng)頁(yè)的結(jié)構(gòu)與樣式，但只要你有豐富的想象力锰霜，就能創(chuàng)造無(wú)限可能筹误。
本文中大師兄為你精選了10個(gè)使用純CSS實(shí)現(xiàn)的文字炫酷效果，欣賞完之后一定要自己實(shí)現(xiàn)體驗(yàn)一番哦~
一.漸變文字效果
該效果主要利用
background-clip:text配合color實(shí)現(xiàn)漸變文字效果首先了解
background-clip: text;的意思：以盒子內(nèi)的文字作為裁剪區(qū)域向外裁剪癣缅，文字之外的區(qū)域都將被裁剪掉厨剪。
- 給文本容器設(shè)置漸變背景
background: linear-gradient(90deg, black 0%, white 50%, black 100%);
- 設(shè)置
webkit-background-clip屬性，以文字作為裁剪區(qū)域向外裁剪
-webkit-background-clip: text;
background-clip: text;
- 通過(guò)
-webkit-animation屬性設(shè)置動(dòng)畫,即可實(shí)現(xiàn)上述效果
-webkit-animation: shining 3s linear infinite;
animation: shining 3s linear infinite;
二.彩虹文字效果（跑馬燈）
.text {
letter-spacing: 0.2rem;
font-size: 1.5rem;
background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
}
該效果也是利用background-clip:text和線性漸變屬性linear-gradient實(shí)現(xiàn)友存，通過(guò)設(shè)置區(qū)域顏色值實(shí)現(xiàn)了彩虹文字的效果祷膳。
動(dòng)態(tài)彩虹文字需要設(shè)置-webkit-animation屬性
-webkit-animation: maskedAnimation 4s infinite linear;
@keyframes maskedAnimation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
三.發(fā)光文字效果
該效果主要利用
text-shadow屬性實(shí)現(xiàn)。text-shadow屬性向文本添加一個(gè)或多個(gè)陰影爬立。該屬性是逗號(hào)分隔的陰影列表钾唬，每個(gè)陰影有兩個(gè)或三個(gè)長(zhǎng)度值和一個(gè)可選的顏色值進(jìn)行規(guī)定。
.neon {
color: #cce7f8;
font-size: 2.5rem;
-webkit-animation: shining 0.5s alternate infinite;
animation: shining 0.5s alternate infinite;
}
@-webkit-keyframes shining {
from {
text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
}
to {
text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
}
}
四.打字機(jī)效果
該效果主要是通過(guò)改變?nèi)萜鞯膶挾葘?shí)現(xiàn)的。
.typing {
color: white;
font-size: 2em;
width: 21em;
height: 1.5em;
border-right: 1px solid transparent;
animation: typing 2s steps(42, end), blink-caret .75s step-end infinite;
font-family: Consolas, Monaco;
word-break: break-all;
overflow: hidden;
}
/* 打印效果 */
@keyframes typing {
from {
width: 0;
}
to {
width: 21em;
}
}
/* 光標(biāo) */
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: currentColor;
}
}
white-space:nowrap屬性主要是為了保證一行顯示抡秆，這里考慮到英文字母的顯示奕巍，去除了該屬性，保證不會(huì)出現(xiàn)字符間斷的情況儒士。
word-break:break-all使英文字符可以一個(gè)一個(gè)的呈現(xiàn)出來(lái)的止。
animation屬性中的steps功能符可以讓動(dòng)畫斷斷續(xù)續(xù)的執(zhí)行，而非連續(xù)執(zhí)行着撩。
steps()語(yǔ)法表示:steps(number, position)诅福，其中number關(guān)鍵字表示將動(dòng)畫分為多少段
；position關(guān)鍵字表示動(dòng)畫是從時(shí)間段的開頭連續(xù)還是末尾連續(xù)拖叙，支持start和end倆個(gè)關(guān)鍵字氓润，含義分別如下：
-
start:表示直接開始 -
end:表示戛然而止，為默認(rèn)值
光標(biāo)效果是通過(guò)box-shadow模擬實(shí)現(xiàn)的薯鳍。
通過(guò)上述的這幾個(gè)屬性就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)易的打字機(jī)效果了~
五.故障風(fēng)格文字效果
該動(dòng)畫效果比較復(fù)雜咖气，主要用到了
CSS偽元素、元素自定義屬性挖滤、蒙版屬性崩溪、animation動(dòng)畫等等。
<div class="text" data-text="歡迎關(guān)注【前端實(shí)驗(yàn)室】">
歡迎關(guān)注【前端實(shí)驗(yàn)室】
</div>
這里主要使用了自定義屬性斩松，data-加上自定義的屬性名伶唯，賦值要顯示的文字供偽元素獲取到對(duì)應(yīng)的文字。
@keyframes animation-before{
0% {
clip-path: inset(0 0 0 0);
}
...
100% {
clip-path: inset(.62em 0 .29em 0);
}
}
@keyframes animation-after{
0% {
clip-path: inset(0 0 0 0);
}
...
100% {
clip-path: inset(.29em 0 .62em 0);
}
}
這里設(shè)置了兩個(gè)keyframes惧盹，分別為 animation-before 乳幸、animation-after，前者是準(zhǔn)備給偽元素 before 使用的钧椰，后者是給偽元素 after 使用的反惕。
其中clip-path屬性是CSS3的新屬性蒙版，其中的inset()值表示的是蒙版形狀為矩形,定義蒙版的作用區(qū)域后通過(guò)@keyframes來(lái)設(shè)置逐幀動(dòng)畫演侯，使蒙版的作用區(qū)域在垂直方向一直變化姿染，實(shí)現(xiàn)上下抖動(dòng)的效果。
.text::before{
content: attr(data-text);
position: absolute;
left: -2px;
width: 100%;
background: black;
text-shadow:2px 0 red;
animation: animation-before 3s infinite linear alternate-reverse;
}
.text::after{
content: attr(data-text);
position: absolute;
left: 2px;
width: 100%;
background: black;
text-shadow: -2px 0 blue;
animation: animation-after 3s infinite linear alternate-reverse;
}
最后我們?cè)O(shè)置兩個(gè)偽元素before和after秒际，分別定位到跟父元素同樣的位置悬赏，然后分別向左、右側(cè)移一點(diǎn)點(diǎn)的距離娄徊，制作一個(gè)錯(cuò)位的效果闽颇，然后都將背景色設(shè)置為與父元素背景色一樣的顏色，用于遮擋父元素
這樣就可以實(shí)現(xiàn)了一個(gè)完美的故障風(fēng)格的文字展示動(dòng)畫了~
炫酷的特效可以為我們的網(wǎng)頁(yè)增添不一樣的風(fēng)采寄锐，本文中實(shí)現(xiàn)的效果源代碼大師兄已經(jīng)上傳到Github兵多，后臺(tái)回復(fù)文字特效即可獲取尖啡，快來(lái)跟我們一起學(xué)習(xí)吧！
進(jìn)了前端門剩膘，便是一家人
原創(chuàng)不易,點(diǎn)贊衅斩、留言、分享就是大師兄寫下去的動(dòng)力!
