text-stroke(文本描边)和text-fill-color(文本填充色)注意点：
  1. 目前这两个属性只有webkit内核的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;
  2. text-fill-color：颜色值，和color属性差不多都是文字的样式；
  3. 同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；
  4. text-fill-color可以使用透明值，即：text-fill-color：transparent
  6. <!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>

text样式的更多相关文章

  1. HTML 样式表

    样式代码 样式代码与属性代码区别   样式代码必须带单位 属性不需要  多个样式代码之间用分号隔开  同一个样式里面 用空格  多个属性之间用空格隔开    举例 1.背景样式 .r { backgr ...

  2. 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改

    作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...

  3. Windows Phone开发（16）：样式和控件模板

    原文:Windows Phone开发(16):样式和控件模板 在前面资源一文中也提过样式,样式就如同我们做HTML页排版时常用到的CSS样式表,它是对于特定娄型的可视化元素,应该可以直接说是针对控件的 ...

  4. 样式（Style）和主题（Theme）资源——样式资源

    样式和主题资源都是用于对Android应用进行“美化”的,只要充分利用Android应用的样式和主题资源,开发者可以开发出各种风格的Android应用. 样式资源:         如果我们经常需要对 ...

  5. Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template

    在上一篇,介绍了Visual State Manager视觉状态管理器,其中涉及到控件的样式(Style)和模板(Template),本篇将详细介绍样式(Style)和模板(Template)在Sil ...

  6. [android] 安卓自定义样式和主题

    简单练习自定义样式和主题,样式是加在View上,主题是加在Application或者Activity上 styles.xml <?xml version="1.0" enco ...

  7. 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动

    作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...

  8. 样式和模板快速入门Style,Template

    http://www.cnblogs.com/jv9/archive/2010/04/14/1711520.html 样式(Style)和模板(Template)的定义 在Silverlight中,样 ...

  9. React Native之ListView使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

随机推荐

  1. 转： windows下C++ UI库 UI神器-SOUI

    转:http://www.cnblogs.com/setoutsoft/p/4996870.html 前言 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多 ...

  2. windows Visual Studio 2017 编译 HEVC cmake-3.8.1-win64-x64.msi 下载

    ttps://github.com/OpenHEVC/openHEVC 下载一 直接下载源码(可选)或下载源码包,我这里下载的是源码 打开 Visual Studio () 去 github 找到源码 ...

  3. poj 2778 AC自己主动机 + 矩阵高速幂

    // poj 2778 AC自己主动机 + 矩阵高速幂 // // 题目链接: // // http://poj.org/problem?id=2778 // // 解题思路: // // 建立AC自 ...

  4. ZT：没有谁的成功是横空出世

    这世上,没有谁的成功是横空出世. 你看到的胸有成竹,是别人犯过错后的顿悟: 你看到的举重若轻,是别人跌过跤后的自省: 你看到的闪亮光环,是一个人咬牙走了很久的夜路,才为自己点亮的一盏灯. 你以为自己输 ...

  5. zabbix 配置外部邮件server发送邮件报警

    一.安装配置msmtp 1.下载msmtp wget http://downloads.sourceforge.net/msmtp/msmtp-1.4.30.tar.bz2?big_mirror=0 ...

  6. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何在初始化的时候写入参数

    最常见的是定义一个全局变量,然后跟对应的变量绑定,比如我定义了一个SINT型的变量ControlWord 数值是8,定义好之后编译一下,可以发现PLC程序中或多出来这个变量(MAIN.ControlW ...

  7. ffmpeg怎么样处理网络流

    http://blog.sina.com.cn/s/blog_675142dc01010otk.html 最近遇到好几个人在问ffmpeg如何处理网络流,刚好前段时间也在做这方面,抽空整理了下,把主要 ...

  8. iOS项目开发实战——使用CoreLocation获取当前位置信息

    随着基于位置服务LBS和移动互联网的兴起,你的位置是越来越重要的一个信息.位置服务已经是当前的热门应用如微信.陌陌等社交应用的杀手锏.而在iOS开发中,苹果已经给我们提供了一个位置接口.CoreLoc ...

  9. gitlab和github区别

    1.概述: github  是一个基于git实现在线代码托管的仓库,向互联网开放,企业版要收钱.gitlab   类似 github,一般用于在企业内搭建git私服,要自己搭环境. 2.GitHub. ...

  10. windows域相关

    查看域角色: netdom query fsmo