<!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. .Net面試4套

    一 1. 面向对象的思想主要包括什么? 答: 继承,多态,封装,类,对象,接口,聚集,聚合,泛化 2. 什么是ASP.net中的用户控件 答: 用户控件就是使用.ascx作为扩展名的文件,其将多种服务 ...

  2. sql server 查询分析器消息栏里去掉“(5 行受影响)”

    sql server 查询分析器消息栏里去掉"(5 行受影响)"     在你代码的开始部分加上这个命令: set nocount on   记住在代码结尾的地方再加上: set ...

  3. Servlet&jsp基础：第三部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. iOS添加广告的主要方法

    //用户取消正在执行的广告时 调用 - (void)cancelBannerViewAction { NSLog(@"Banner was cancelled!"); self.a ...

  5. Codeforces Round #376 (Div. 2) F. Video Cards 数学，前缀和

    F. Video Cards time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  6. luabind 导出string问题

    luabind导出字符串 不能导出char* 会有问题 应该是字符串连接的时候出错了 static _TCHAR* pRetChar = new _TCHAR[10]; memcpy(pRetChar ...

  7. 保存会话数据——session学习

    Session:Session是服务器端技术,利用这个技术,服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象,由于session为用户浏览器独享,所以用户在访问服务器的web资 ...

  8. V8 引擎的sort算法

    用的是快速排序,有点小问题 function ArraySort(comparefn) { // In-place QuickSort algorithm. // For short (length ...

  9. 关于jQuery的小知识点

    jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中. jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML ...

  10. jQuery动态加载css文件实现方法

    $("<link>").attr({ rel: "stylesheet",type: "text/css",href: &quo ...