<!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. 配置Python+selenium+firefox自动化测试

    1.安装python.默认安装 2.安装pip.下载pip-1.5.4包,解压pip-1.5.4,放在C盘,进入pip目录-->键入命令:python setup.py install  再进入 ...

  2. HTML在IE中的条件注释

    HTML在IE中的条件注释 HTML的条件注释在IE5中被首次引入,直到IE9.一直都是简单地判定用户浏览器(IE,非IE,IE版本)的一种手段,而在IE10的标准模式下,条件注释功能被停止支持(兼容 ...

  3. NTT

    1 问题描述FFT问题解决的是复数域上的卷积.如果现在的问题是这样:给出两个整数数列$Ai,Bj,0\leq i\leq n-1,0\leq j\leq m-1$,以及素数$P$,计算新数列$Ci=( ...

  4. css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

    css参考文档        http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...

  5. CANopen笔记2

    PDO 过程数据对象用于在节点之间传送过程数据,如I/O模块I/O状态读取和设定,模拟量采集和模拟量输出等等,协议考虑从机硬件限制最多支持4组PDO,每组包含一个RPDO和一个TPDO.The Gol ...

  6. linux 中 ll 命令如何让查询结果按时间升序或降序排序？

    -t选项的功能是使输出的结果将以时间降序排列.如果希望按时间的升序排列,可以使用管道符将返回的结果传入tac命令.用法示例:查询当前目录的文件并以降序排列: ll -t查询当前目录的文件并以升序排列: ...

  7. 【VB6笔记-01】 读取Excel绑定到DataGrid

    Private Sub cmdOpen_Click() CommonDialog1.Filter = "Excel???t(*.xlsx)|*.xlsx" CommonDialog ...

  8. SQL SERVER 2005中同义词实例

    From : http://www.cnblogs.com/jackyrong/archive/2006/11/15/561287.html 在SQL SERVER 2005中,终于出现了同义词了,大 ...

  9. vi_命令

    1.文件末尾新增一行: 非编辑模式下,按大写的G 跳到最后一行. 然后按小写的O键,增加一行. 2.删掉一行: 非编辑状态下,光标定位到要删除的那一行,然后  dd 3.删字符 在非插入模式下,把光标 ...

  10. python 将页面保存为word

    将博客或者留言页面保存为word文档 -----------2016-5-11 14:40:04-- source:http://blog.csdn.net/how8586/article/detai ...