css是前端開發者所必備的技能！那么，在開發過程中你對css效果又了解多少呢？
在社區中看到一篇關於css文字特效的文章，摘取部分分享給大家
一、實現線性漸變的文字
實例描述：在網頁制作時，可以通過對文字顏色的設置來實現網頁的特殊效果。本實例將使用 CSS3 實現文字線性漸變的效果。運行實例，在頁面中會輸出一串線性漸變的文字 人生苦短，我用Python，結果如下圖所示：
技術要點：本實例主要使用了 CSS3 中的 linear-gradient() 函數，該函數用於創建一個線性漸變的圖像。語法格式如下：
background:linear-gradient(direction, color-stop1, color-stop2, …)
/*參數說明：
1. direction：設置漸變的方向，可以使用角度值。
2. color-stop1, color-stop2, …：指定漸變的起止顏色。*/
二、制作文字陰影效果
技術要點：本實例主要使用了CSS3中的text-shadow屬性，該屬性用於向文本設置陰影。語法格式如下：
text-shadow: h-shadow v-shadow blur color;
/*參數說明：
h-shadow：必選參數，用於設置水平陰影的位置，可以為負值。
v-shadow：必選參數，用於設置垂直陰影的位置，可以為負值。
blur：可選參數，用於設置模糊的距離。
color：可選參數，用於設置陰影的顏色。*/
三、實現文字的熒光閃爍效果
animation: name duration timing-function delay iteration-count direction;
參數說明如下表所示：
五、制作鏤空文字
技術要點：在本實例中，實現文字的鏤空效果主要應用了CSS3中的text-stroke屬性，通過該屬性可以設置文字的描邊效果。語法格式如下：
text-stroke:[text-stroke-width] || [text-stroke-color]
/*參數說明： text-stroke-width：設置文字的描邊厚度。
text-stroke-color：設置文字的描邊顏色。*/
六、實現文字的傾斜效果
text-stroke:[text-stroke-width] || [text-stroke-color]
/*參數說明： text-stroke-width：設置文字的描邊厚度。
text-stroke-color：設置文字的描邊顏色。*/
七、實現火焰文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實現火焰文字</title>
<style type="text/css">
body{
font-size:120px; /*設置字體大小*/
font-weight:bold; /*設置字體粗細*/
font-family:'微軟雅黑'; /*設置字體*/
background:#000; /*設置頁面背景顏色*/
color:#fff; /*設置文字顏色*/
text-align:center/*設置文字居中*/
}
div{
text-shadow:0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
0 -80px 70px #f38e1c; /*設置文字陰影*/
-webkit-animation: flame 2s infinite; /*設置動畫*/
}
@-webkit-keyframes flame{ /*創建動畫*/
0%{
text-shadow:0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
0 -80px 70px #f38e1c;
}
30%{
text-shadow:0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
10px -90px 80px #f38e1c;
}
60%{
text-shadow:0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
0px -80px 100px #f38e1c;
}
100%{
text-shadow:0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
0 -80px 70px #f38e1c;
}
}
</style>
</head>
<body>
<div>星星之火可以燎原</div>
</body>
</html>
八、使用SVG創建空心虛線線條文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
text{
font-family:SimHei; /*定義字體*/
font-size:56px; /*定義文字大小*/
font-weight:bolder; /*定義字體粗細*/
fill:transparent; /*定義文字透明*/
stroke:#0000FF; /*定義描邊顏色*/
stroke-dasharray:3; /*定義虛線長度和虛線間距*/
}
</style>
</head>
<body>
<svg width="600" height="300">
<text x="30" y="150">人生苦短，我用Python</text>
</svg>
</body>
</html>
九、使用SVG實現文字沿曲線顯示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用SVG實現文字沿曲線顯示效果</title>
<style type="text/css">
text{
font-family:SimHei;/*定義字體*/
font-size:33px;/*定義文字大小*/
fill:url(#linear);/*定義文字顏色線性漸變*/
}
</style>
</head>
<body>
<svg width="1000" height="800">
<defs>
<path id="textPath" d="M130,140 C130,240 330,240 330,140 S510,60 510,140"/>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF0000"></stop>
<stop offset="50%" stop-color="#00FF00"></stop>
<stop offset="100%" stop-color="#0000FF"></stop>
</linearGradient>
</defs>
<text dy="10">
<textPath xlink:href="#textPath">世界會向那些有目標和遠見的人讓路</textPath>
</text>
</svg>
</body>
</html>
十、簡單文字變色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單文字變色</title>
</head>
<body>
<h1 align="center">amo xiang</h1>
</body>
</html>
<script>
var colors=new Array("red","orange","green","blue","browm","putple","gray","white");
var ind=0;
function changecolor(){
document.fgColor=colors[ind++];
if (ind==(colors.length)){ind=0}
}
setInterval("changecolor()",500);
window.onload=changecolor;
</script>
十一、追逐點亮的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>追逐點亮的文字</title>
</head>
<body>
</body>
</html>
<script>
Strname="天若有情天亦老我們";
StrLen=Strname.length;
document.write("<div id='a' style='color:#6666FF;font-size:24px'></div>");
var act=0;
function gogo()
{
++act;
act=(act>(StrLen-1))?0:act;
act=(act<0)?(StrLen-1):act;
a.innerHTML=Strname.substring(0,act)+"<font style='font-size:24px' color='#00FF33'>"+Strname.substring(act,act+1)+"</font>"+Strname.substring(act+1,StrLen);
}
setInterval("gogo()",200);
</script>
選自SDN博主「Amo Xiang」的原創文章。
原文鏈接：https://blog.csdn.net/xw1680/article/details/118065460