這篇文章為大家帶來了5中非常酷炫的文字效果，這些效果全是利用css來實現的，希望對大家有幫助。
CSS是一門很特殊的語言，你認為CSS只能用來控制網頁的結構與樣式，但只要你有豐富的想像力，就能創造無限可能。
一.漸層文字效果
#此效果主要利用background-clip:text配合color實現漸變文字效果首先了解background-clip: text;的意思：以盒子內的文字作為裁剪區域向外裁剪，文字之外的區域都將被裁剪掉。 為文字容器設定漸進式背景
background: linear-gradient(90deg, black 0%, white 50%, black 100%);
-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%;
}動態彩虹文字需要設定-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>
start:表示直接開始
end:表示戛然而止，為預設值
遊標效果是透過box-shadow模擬實現的。透過上述的這幾個屬性就可以實現一個簡易的打字機效果了~
######### ###### 該動畫效果比較複雜，主要用到了CSS偽元素、元素自訂屬性、蒙版屬性、animation動畫等等。 ###<div class="text" data-text="欢迎关注微信公众号【前端实验室】"> 欢迎关注微信公众号【前端实验室】 </div>
@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);
}
}.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;
}以上是整理分享5種純CSS實現酷炫的文字效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
