寫過很多頁面，可是在實際中用到文字特效的地方還是很少，最多的就是給文字添加text-shadow陰影效果。

今天在瀏覽網頁的時候發現了一組文字特效，雖然很簡單但是你讓我來寫我肯定是寫不出來，所以研究了一會，寫了幾個小樣式。

一、文字漸變

主要樣式有

linear-gradient（文字漸變方向，指定顏色，漸變顏色 漸變起始位置）

text-fill-color(指定文字的填充顏色) PS:如果和color一起用將會覆蓋color的顏色

<style>　

@-webkit-keyframes bgp {
　　0% { background-position: 0 0;}
　　100% { background-position: -100% 0;}
}
.text{
　　-webkit-mask-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
　　background-image: -webkit-linear-gradient(left, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
　　background-image: -o-linear-gradient(left, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
　　background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
　　-webkit-background-clip: text;
　　-webkit-text-fill-color: transparent;
　　-webkit-background-size: 200% 100%;
　　animation: bgp 5s infinite linear;
}

</style>

二、鏤空文字

<style>

.stroke{
　　-webkit-text-fill-color: transparent;
　　-webkit-text-stroke: 1px red;
　　font-size: 75px;
}

</style>

三、倒影文字

<style>

.reffect{
　　font-size: 50px;
　　text-shadow: 5px 5px 5px #eee;
　　-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
}

</style>

css3文字特效