今天总结一下文字的样式特效。
1.移动字体(走马灯)
<marquee>写上你想写的字</marquee>
效果：不停移动
marquee标签的属性：
direction 表示滚动的方向，值可以是left，right，up，down，默认为left
behavior 表示滚动的方式，值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
loop 表示循环的次数，值是正整数，默认为无限循环
scrollamount 表示运动速度，值是正整数，默认为6
scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
align 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width 表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100% height为标签内元素的高度。
hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。
示例：
1 <marquee direction="right" behavior="alternate" scrollamount="20" scrolldelay="20" align="botton" style=" 2 height: 50px; 3 color: white; 4 text-shadow: 0px 0px 20px #0cff18; 5 " bgcolor="#008f99">Up Down</marquee>
2.text-shadow特效
很多特效都是用text-shadow实现的。用过PS的可能对这个比较熟悉，就是图层的混合选项效果。
语法:
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是： text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或者 text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...
取值:
<length>：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值
<color>：指定阴影颜色，也可以是rgba透明色
<shadow>：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离。
可以叠加多个阴影效果，逗号分隔。
2.1阴影（重影，投影）
1 { 2 color: #f00; 3 text-shadow: 1px 1px 0px #212121; 4 }
2.2 3D效果
使用多重阴影来达到3D的效果。
1 { 2 color: #fff; 3 text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25); 4 }
2.3外发光
在2.1的基础上，将blur加大，不设置阴影偏移。并通过多重的阴影和不同的过渡颜色实现真实感的发光效果。
1 { 2 color: #fff; 3 text-shadow: 0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #095816, 0 0 25px #095816, 0 0 30px #095816, 0 0 50px #095816, 0 0 80px #095816, 0 0 100px #095816, 0 0 150px #095816; 4 }
2.4凹陷/凸显/浮雕
结合背景颜色，和文字颜色、阴影颜色一起来达到想要的效果。对于这一效果，不同的人体感可能有所差异，也可以叠加阴影，来达到更逼真的效果。
1 { 2 color: #222; 3 text-shadow: 0px 2px 3px #555; 4 background-color: #454545; 5 }
1 { 2 color: #ccc; 3 text-shadow: -1px -1px #fff, 1px 1px #333; 4 }
1 { 2 -webkit-background-clip: text; 3 -moz-background-clip: text; 4 background-color: red;
/* #d6d2c1 */ 5 background-clip: text; 6 color: transparent; 7 text-shadow: 0 3px 3px rgba(255,255,255,0.5); 8 }
2.5模糊，毛玻璃
通过设置前景色透明，然后设置blur模糊度以及颜色即可。
1 { 2 color: transparent; 3 text-shadow: 0 0 5px #000; 4 }
2.6纹理
用图片叠加到文字上
1 <h2 class="grunge">Grunge Effect <span></span></h2> 2 h2.grunge { 3 position:relative; 4 color: #f06369; 5 background: #000; 6 text-shadow: 0 0 2px rgba(255,255,255,0.3), -1px -1px 0 #fcfcfc, 1px 1px 0 #ccc; 7 } 8 9 h2.grunge span{ 10 position:absolute; 11 display:block; 12 top:0; 13 left:0; 14 height:100%; 15 width:100%; 16 background:url("images/ground.png"); 17 }
2.7补色
类似色相抖动效果
1 { 2 color: rgba(255, 179, 140,0.5); 3 text-shadow: 3px 3px 0 rgba(180,255,0,0.5); 4 }
3图片填充，叠加图片
1 { 2 background: url(XXX) no-repeat left top; 3 -webkit-background-clip: text; 4 -webkit-text-fill-color: transparent; 5 }
4渐变
使用webkit-mask-image
1 <h1><a href="#">Gradient Effect</a></h1> 2 h1 { 3 position: relative; 4 text-shadow: 1px 0 4px #006; 5 font-family: Airal; 6 } 7 h1 a { 8 position: absolute; 9 top: 0; 10 z-index: 2; 11 color: #f36902; 12 -webkit-mask-image: -webkit-gradient(linear, left top,left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); 13 text-descoration: none; 14 } 15 h1:after { 16 content: "Gradient Effect"; 17 color: #000; 18 text-shadow: 1px 1px 1px #600; 19 }
5扫光
使用方案：动画+渐变
1 <div class="bg"> 2 <p class="slideShine">Welcome to xinpureZhu Blog</p> 3 </div> 4 .bg { 5 background: #000; 6 width: 1000px; 7 height: 300px; 8 margin: 0 auto; 9 padding-top: 100px; 10 } 11 12 .slideShine { 13 width: 1000px; 14 font-family: "Microsoft YaHei"; 15 font-size: 60px; 16 text-align: center; 17 18 background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat; 19 -webkit-background-size: 80px; 20 21 -webkit-background-clip: text; 22 -webkit-text-fill-color: rgba(255, 255, 255, 0.3); 23 24 -webkit-animation: slideShine 3s infinite; 25 } 26 27 @-webkit-keyframes slideShine { 28 0% { 29 background-position: 0 0; 30 } 31 100% { 32 background-position: 100% 100%; 33 } 34 }
需要注意的是，有些样式属性是谷歌和火狐特有的，因而会有一定的兼容性问题。