CSS是一門很特殊的語言,你認為CSS只能用來控制網頁的結構與樣式,但只要你有豐富的想象力,就能創造無限可能。
一.漸變文字效果
該效果主要利用background-clip:text配合color實現漸變文字效果 首先了解background-clip: text;的意思:以盒子內的文字作為裁剪區域向外裁剪,文字之外的區域都將被裁剪掉。
給文字容器設定漸變背景
background: linear-gradient(90deg, black 0%, white 50%, black 100%);
設定webkit-background-clip屬性,以文字作為裁剪區域向外裁剪
-webkit-background-clip: text; background-clip: text;
通過-webkit-animation屬性設定動畫,即可實現上述效果
-webkit-animation: shining 3s linear infinite; animation: shining 3s linear infinite;
@-webkit-keyframes shining { from { background-position: -500%; } to { background-position: 500%; } } @keyframes shining { from { background-position: -500%; } to { background-position: 500%; } }
樣式參照
<html> <link rel="stylesheet" href="./css/neno-text-style.css"> <body> <p class="neon">前端實驗室</p> </body> </html>
二.彩虹文字效果(跑馬燈)
.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實現,通過設定區域顏色值實現了彩虹文字的效果。
動態彩虹文字需要設定-webkit-animation屬性
-webkit-animation: maskedAnimation 4s infinite linear; @keyframes maskedAnimation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } }
CSS樣式
.rainbow { letter-spacing: 0.2rem; font-size: 1.2rem; text-transform: uppercase; } .rainbow span { animation: rainbow 50s alternate infinite forwards; } @keyframes rainbow { 0% { color: #efc68f; } ... 100% { color: #8fefed; } }
<html> <head> <link rel="stylesheet" href="./css/rainbow-color-text-style.css"> </head> <body> <div class="text">【前端實驗室】分享前端最新、最實用前端技術</div> </body> </html>
三.發光文字效果
該效果主要利用text-shadow屬性實現。text-shadow屬性向文字新增一個或多個陰影。該屬性是逗號分隔的陰影列表,每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。
.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; } }
<html> <head> <link rel="stylesheet" href="./css/neno-text-style.css"> </head> <body> <p class="neon">【前端實驗室】分享前端最新、最實用前端技術</p> </body> </html>
四.打字機效果
該效果主要是通過改變容器的寬度實現的。
.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; } } /* 遊標 */ @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: currentColor; } }
<html> <head> <link rel="stylesheet" href="./css/typing-style.css"> </head> <body> <div class="typing">【前端實驗室】分享前端最新、最實用前端技術</div> </html>
white-space:nowrap屬性主要是為了保證一行顯示,這裡考慮到英文字母的顯示,去除了該屬性,保證不會出現字元間斷的情況。
word-break:break-all使英文字元可以一個一個的呈現出來。
animation屬性中的steps功能符可以讓動畫斷斷續續的執行,而非連續執行。
steps()語法表示:steps(number, position),其中number關鍵字表示將動畫分為多少段 ;position關鍵字表示動畫是從時間段的開頭連續還是末尾連續,支援start和end倆個關鍵字,含義分別如下:
start:表示直接開始
end:表示戛然而止,為預設值
遊標效果是通過box-shadow模擬實現的。 通過上述的這幾個屬性就可以實現一個簡易的打字機效果了~
五.故障風格文字效果
該動畫效果比較複雜,主要用到了CSS偽元素、元素自定義屬性、蒙版屬性、animation動畫等等。
<div class="text" data-text="歡迎關注微信公眾號【前端實驗室】"> 歡迎關注微信公眾號【前端實驗室】 </div>
這裡主要使用了自定義屬性,data-加上自定義的屬性名,賦值要顯示的文字供偽元素獲取到對應的文字。
@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); } }
這裡設定了兩個keyframes,分別為 animation-before 、animation-after,前者是準備給偽元素 before 使用的,後者是給偽元素 after 使用的。
其中clip-path屬性是CSS3的新屬性蒙版,其中的inset()值表示的是蒙版形狀為矩形,定義蒙版的作用區域後通過@keyframes來設定逐幀動畫,使蒙版的作用區域在垂直方向一直變化,實現上下抖動的效果。
.text{ display: inline-block; font-size: 3.5em; font-weight: 600; padding: 0 4px; color: white; position: relative; }
.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; }
最後我們設定兩個偽元素before和after,分別定位到跟父元素同樣的位置,然後分別向左、右側移一點點的距離,製作一個錯位的效果,然後都將背景色設定為與父元素背景色一樣的顏色,用於遮擋父元素
這樣就可以實現了一個完美的故障風格的文字展示動畫了~
炫酷的特效可以為我們的網頁增添不一樣的風采,本文中實現的效果原始碼大師兄已經上傳到Github,公眾號後臺回覆aaa文字特效即可獲取,快來跟我們一起學習吧!
(學習視訊分享:)
以上就是整理分享5種純CSS實現炫酷的文字效果的詳細內容,更多請關注TW511.COM其它相關文章!