<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0 ;padding:0;}

        .con{margin:20px auto;width:500px;text-align:center}

        .con span{

           /* font-size:100px;

            -webkit-text-fill-color: white;

            -webkit-text-stroke-color: red;

            -webkit-text-stroke-width: 2px;

            text-stroke-color: red;

            text-stroke-width: 2px;*/

            -webkit-text-fill-color:#fff;

            -webkit-text-stroke: 1px #333;

            font-size:30px;

            font-family:"microsoft yahei";

            letter-spacing:20px;

        }

        span{

            -webkit-animation:anima 2s linear infinite;

        }

        @-webkit-keyframes anima{

            0%{-webkit-transform:translate(0,0);}

            20%{-webkit-transform:translate(0,-14px);}

            25%{-webkit-transform:translate(0,-15px);}

            30%{-webkit-transform:translate(0,-14px);}

            50%{-webkit-transform:translate(0,0px);}

            60%{-webkit-transform:translate(0,14px);}

            70%{-webkit-transform:translate(0,15px);}

            80%{-webkit-transform:translate(0,14px);}

            100%{-webkit-transform:translate(0,0);}

        }

        .span1{-webkit-animation-delay:0s;}

        .span2{-webkit-animation-delay:0.3s;}

        .span3{-webkit-animation-delay:0.6s;}

        .span4{-webkit-animation-delay:0.9s;}

    </style>

</head>

<body>

    <div class="con">

        <span class="span1">我</span>

        <span class="span2">是</span>

        <span class="span3">好</span>

        <span class="span4">人</span>

    </div>

</body>

</html>

html

空心文字闪动--css3的更多相关文章

  1. WPF自定义空心文字

    首先创建一个自定义控件,继承自FrameworkElement,“Generic.xaml”中可以不添加样式. 要自定义空心文字,要用到绘制格式化文本FormattedText类.FormattedT ...

  2. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  3. Flash-制作空心文字

    常常看到站点上用很多空心文字作为站点的名称或者特色项目的名称等等,那这些空心文字是怎么做出来的呢? 用Flash事实上非常快就能做出来.过程例如以下: (1)新建空白文件.工具箱中选择"文本 ...

  4. css3 文字闪动效果

    <div id="container"> 这里查看“<span class="blink">闪烁效果</span>”,ENj ...

  5. 从小姐姐博客那里看到的流光文字（CSS3 animate）

    对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代.你们卟懂绯紸流!色彩缤纷的QQ空间...... 还记得那些炫酷的签名档,或者那些炫酷的动态头像.不过大家对于流光文字的印象还是图片.那么在网页 ...

  6. element-ui多选框模糊搜索输入文字闪动问题

    .el-select__tags { .el-select__input { width: 50px !important; } } 添加这段代码即可 <el-select v-model=&q ...

  7. css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效

    这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...

  8. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  9. css3投影讲解、投影

    迷茫了好一段时间,今天开始整理一下自己,同时也整理下新的知识. CSS3: 从头开始做起:现在在页面中用到最多的是图片/容器投影,文字投影: 接下来就总结一个投影问题: box-shadow:阴影类型 ...

随机推荐

  1. Struts2的标签库（四）——数据标签

    Struts2的标签库(四) --数据标签 1.action标签 该标签用于在jsp页面直接调用一个Action,通过指定executeResult参数,还可以将Action的处理结果包含到此页面中来 ...

  2. 摩托罗拉SE4500 德州仪器TI Omap37xx/AM3715/DM3730/AM3530 wince6.0/Windows Mobile 6.5平台 二维软解调试记录及相关解释

    现在安卓大行其道,不是高通,就是MTK,甚至于很多人不知道还有德州仪器这个平台了,关于如何在德州仪器Omap37xx平台上调试SE4500,网络上除了针对SE4500的几个pdf文档介绍之外,没有任何 ...

  3. MIME协议生成邮件

    MIME协议生成一封复杂的邮件 MIME协议是对RFC822文档的升级和补充,用MIME协议能生成一封有文字.图片和附件的复杂邮件.首先要导入activation.jar和mail.jar.Mail. ...

  4. 【转载】使用C#进行系统编程

    原文:使用C#进行系统编程 虽然对于系统编程(System programming)的定义很模糊,不过可以将其描述为在比特.字节.指令,或CPU周期层面所进行的思考.系统编程这个概念也暗含了对性能和可 ...

  5. [c/c++]linux下使用c/c++操作mysql

    首先需要安装相应的库文件,直接apt-get就可以. sudo apt-get install libmysqlclient-dev 编译的时候,需要额外链接到这个库.如果是apt-get安装的话,那 ...

  6. 07.常用的SQL语句

    常用SQL语句,仿照着写(只改动字段和表名,库名) 查看数据库引擎                SHOW ENGINES;(默认InnoDB) 用数据库生成UUID            selec ...

  7. APP前端公共测试点

  8. T-SQL利用Case When Then多条件判断

    CASE    WHEN 条件1 THEN 结果1    WHEN 条件2 THEN 结果2    WHEN 条件3 THEN 结果3    WHEN 条件4 THEN 结果4.........    ...

  9. [poj2286]The Rotation Game (IDA*)

    //第一次在新博客里发文章好紧张怎么办 //MD巨神早已在一个小时前做完了 The Rotation Game Time Limit: 15000MS Memory Limit: 150000K To ...

  10. ubuntu的dns设置

    ubuntu的dns设置为: dns-nameservers 8.8.8.8 注意不要少s