文字效果总结

　　今天总结一下文字的样式特效。

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() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

示例：

<marquee direction="right" behavior="alternate" scrollamount="20" scrolldelay="20" align="botton" style="
    height: 50px;
    color: white;
    text-shadow: 0px 0px 20px #0cff18;
" 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阴影（重影，投影）

{
color: #f00;
text-shadow: 1px 1px 0px #212121;    
}

2.2 3D效果

使用多重阴影来达到3D的效果。

{
color: #fff;
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);
}

2.3外发光

在2.1的基础上，将blur加大，不设置阴影偏移。并通过多重的阴影和不同的过渡颜色实现真实感的发光效果。

{
    color: #fff;
    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;
}

2.4凹陷/凸显/浮雕

结合背景颜色，和文字颜色、阴影颜色一起来达到想要的效果。对于这一效果，不同的人体感可能有所差异，也可以叠加阴影，来达到更逼真的效果。

{
    color: #222;
    text-shadow: 0px 2px 3px #555;
    background-color: #454545;
}

{
color: #ccc;
text-shadow: -1px -1px #fff, 1px 1px #333;
}

{
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-color: red;
/* #d6d2c1 */
    background-clip: text;
    color: transparent;
    text-shadow: 0 3px 3px rgba(255,255,255,0.5);
}

2.5模糊，毛玻璃

通过设置前景色透明，然后设置blur模糊度以及颜色即可。

{
color: transparent;
text-shadow: 0 0 5px #000;
}

2.6纹理

用图片叠加到文字上

<h2 class="grunge">Grunge Effect <span></span></h2>
　　　　　　　　　　h2.grunge {
                    position:relative;
                    color: #f06369;
                    background: #000;
                    text-shadow: 0 0 2px rgba(255,255,255,0.3), -1px -1px 0 #fcfcfc, 1px 1px 0 #ccc;
                }
                
                h2.grunge span{
                    position:absolute;
                    display:block;
                    top:0;
                    left:0;
                    height:100%;
                    width:100%;
                    background:url("images/ground.png");
                }

2.7补色

类似色相抖动效果

{
    color: rgba(255, 179, 140,0.5);
    text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}

3图片填充，叠加图片

{
    background: url(XXX) no-repeat left top;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

4渐变

使用webkit-mask-image

<h1><a href="#">Gradient Effect</a></h1>
                h1 {
                    position: relative;
                    text-shadow: 1px 0 4px #006;
                    font-family: Airal;
                    }
                 h1  a {
                    position: absolute;
                    top: 0; 
                    z-index: 2;
                    color: #f36902;
                    -webkit-mask-image: -webkit-gradient(linear, left top,left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
                    text-descoration: none;
                    }
                 h1:after {
                    content: "Gradient Effect";
                    color: #000;
                    text-shadow: 1px 1px 1px #600;
                }

5扫光

使用方案：动画+渐变

<div class="bg">
    <p class="slideShine">Welcome to xinpureZhu Blog</p>
</div>
.bg { 
    background: #000;
    width: 1000px;
    height: 300px;
    margin: 0 auto;
    padding-top: 100px;
}

.slideShine {
    width: 1000px;
    font-family: "Microsoft YaHei";
    font-size: 60px;
    text-align: center;

    background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
    -webkit-background-size: 80px;

    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.3);

    -webkit-animation: slideShine 3s infinite;
}

@-webkit-keyframes slideShine {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 100%;
    }
}

需要注意的是，有些样式属性是谷歌和火狐特有的，因而会有一定的兼容性问题。

其他：

帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>
字体加粗：<b>写上你想写的字</b>
字体斜体：<i>写上你想写的字</i>
字体下划线: <u>写上你想写的字</u>
字体删除线: <s>写上你想写的字</s>
字体加大: <big>写上你想写的字</big>

贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>

贴flash: <embed src="flash地址" width="宽度" height="高度">
贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>
换行：<br>
段落：<p>段落</p>
原始文字样式：<pre>正文</pre>
换帖子背景：<body background="背景图片地址">
固定帖子背景不随滚动条滚动：<body background="背景图片地址" bodybgproperties=fixed>

 

demo页面见

https://github.com/MRlijiawei/demos/blob/master/files/%E6%96%87%E5%AD%97%E7%89%B9%E6%95%88demo.html