text样式

text-stroke(文本描边)和text-fill-color(文本填充色)注意点：
目前这两个属性只有webkit内核的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color：颜色值，和color属性差不多都是文字的样式；
同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；
text-fill-color可以使用透明值，即：text-fill-color：transparent
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #box
        { line-height:150px; text-align:center; font-size:100px; font-family:'Microsoft YaHei'; white-space:normal; font-weight:bold;
        }
        p
        {
            margin:0; position:relative; height:150px;
        }
            p.p1
            {
                color:#fff; text-shadow:0 0 1px #666,2px 2px 10px #999; /*效果叠加*/
            }
            p.p2
            {color:#ff6699; text-shadow:8px 8px 1px #fdc9c9; -webkit-text-stroke:3px #fff;}
            p.p3
            {color:#a0a0a0; text-shadow:8px 8px 1px #d3d3d3; -webkit-text-stroke:3px #fff;}
            p.p4
            {color:rgba(255,255,255,0.1); text-shadow:2px 2px 50px #ffcda1; -webkit-text-stroke:3px #ffcda1; background:url(Images/img.png) no-repeat center -120px; -webkit-background-clip:text; }
    </style>
    <script>
        window.onload = function () {
            var aSpan = document.getElementById("box").getElementsByTagName("span");
            var aP = document.getElementById("box").getElementsByTagName("p");
            var aArr = []; //按显示顺序存放span文字数组；

            for (var i = 0; i < aP.length; i++) {
                var aSpans = aP[i].getElementsByTagName("span"); //获取每行的span
                if (i % 2) { //如果是单行，1.3.5...则从最后一个字开始存放； 
                    for (var j = aSpans.length - 1; j >= 0; j--) {
                        aArr.push(aSpans[j]);
                        aSpans[j].style.left = aSpans[j].offsetTop + "px";
                        aSpans[j].style.left = aSpans[j].offsetLeft + "px";  //给每个文字定位,确定每个文字显示的绝对位置
                    }
                }
                else {  //如是双行，0.2.4...则按顺序存放；
                    for (var j = 0; j < aSpans.length; j++) {
                        aArr.push(aSpans[j]);
                        aSpans[j].style.left = aSpans[j].offsetTop + "px";
                        aSpans[j].style.left = aSpans[j].offsetLeft + "px"; //定位
                    }
                }
            }

            //将所有span设为绝对定位，缩小为0%;
            for (var i = 0; i < aSpan.length; i++) {
                aSpan[i].style.position = "absolute";
                aSpan[i].style["WebkitTransform"] = "scale(0)";
            }

            //开始逐个显示文字
            for (var i = 0; i < aArr.length; i++) {
                starMove(aArr[i], 100, i) //参数分别为：需显示的对象数组，目标值即实际字体大小，当前文字显示的索引号
            }
        };

        //参数分别为：需显示的对象数组，文字大小，当前文字显示的索引号
        function starMove(obj, target, i) {
            obj.iNub = 0; //当前值
            obj.iSpeed = 0; //速度
            obj.timer = setTimeout(function () {
                clearTimeout(obj.timer);
                obj.timer = setInterval(function () {
                    domove(obj, target);
                },14) //单个文字以0.014秒的频率由小变大的显示出，；
            }, (i * 200 + 200)); //(i * 200 + 100)为每个文字显示延时时间；
        }

        //参数分别为：需显示的对象数组，文字大小目标值
        function domove(obj, target) {
            obj.iSpeed += (target - obj.iNub) / 16; //+(100-0)/16 显示速度越来越快； 
            
            obj.iSpeed *= 0.91;
            if (obj.iNub == target && Math.abs(obj.iSpeed) < 4) {  //速度小到4或目标值等于预设值时
                clearInterval(obj.timer); //停止晃动
            }
            else {
                obj.iNub += obj.iSpeed;
               // alert(obj.iNub)
                obj.style["WebkitTransform"] = "scale(" + (obj.iNub / 100) + ")";
            }



        }
    </script>
</head>
<body>
    <div id="box">
        <p class="p1"><span>全</span><span>剧</span><span>终</span><span>，</span></p>
        <p class="p2"><span>看</span><span>见</span><span>满</span><span>场</span><span>空</span><span>座</span><span>椅</span><span>，</span></p>
        <p class="p3"><span>灯</span><span>亮</span><span>起</span><span>，</span><span>这</span><span>故</span><span>事</span><span>，</span></p>
        <p class="p4"><span>真</span><span>实</span><span>又</span><span>象</span><span>虚</span><span>幻</span><span>的</span><span>情</span><span>景</span></p>
    </div>
</body>
</html>