1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{margin:0 ;padding:0;}
  8.         .con{margin:20px auto;width:500px;text-align:center}
  9.         .con span{
  10.            /* font-size:100px;
  11.             -webkit-text-fill-color: white;
  12.             -webkit-text-stroke-color: red;
  13.             -webkit-text-stroke-width: 2px;
  14.             text-stroke-color: red;
  15.             text-stroke-width: 2px;*/
  16.             -webkit-text-fill-color:#fff;
  17.             -webkit-text-stroke: 1px #333;
  18.             font-size:30px;
  19.             font-family:"microsoft yahei";
  20.             letter-spacing:20px;
  21.         }
  22.         span{
  23.             -webkit-animation:anima 2s linear infinite;
  24.         }
  25.         @-webkit-keyframes anima{
  26.             0%{-webkit-transform:translate(0,0);}
  27.             20%{-webkit-transform:translate(0,-14px);}
  28.             25%{-webkit-transform:translate(0,-15px);}
  29.             30%{-webkit-transform:translate(0,-14px);}
  30.             50%{-webkit-transform:translate(0,0px);}
  31.             60%{-webkit-transform:translate(0,14px);}
  32.             70%{-webkit-transform:translate(0,15px);}
  33.             80%{-webkit-transform:translate(0,14px);}
  34.             100%{-webkit-transform:translate(0,0);}
  35.         }
  36.         .span1{-webkit-animation-delay:0s;}
  37.         .span2{-webkit-animation-delay:0.3s;}
  38.         .span3{-webkit-animation-delay:0.6s;}
  39.         .span4{-webkit-animation-delay:0.9s;}
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="con">
  44.         <span class="span1">我</span>
  45.         <span class="span2">是</span>
  46.         <span class="span3">好</span>
  47.         <span class="span4">人</span>
  48.     </div>
  49. </body>
  50. </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. MSM8909+Android5.1.1之系统烧录

    1.     安装高通USB驱动 图1 安装成功后,同时按下设备的音量+和音量-按键,且用USB连接到设备上,在设"设备管理器--->端口"下面看到USB虚拟的端口,如下: ...

  2. ubuntu中rar与unrar用法详解

    本文转载:http://helloklzs.iteye.com/blog/1139993 安装: sudo apt-get install rar 这样就可以安装了 删除是以下语句 sudo apt- ...

  3. 将NuGet配置到环境变量中

    https://docs.nuget.org/consume/command-line-reference Installing The NuGet command line may be insta ...

  4. Oracle的数据恢复——Flashback用法汇总

    /* 11g的flashbackup 分好几种,分别用途不一样. A.flashback database 闪回数据库,简单理解就是把数据库闪回到某个以前的时间点, 能恢复到的最早的SCN, 取决与F ...

  5. C语言中strdup函数使用方法

    头文件:#include <string.h> 定义函数:char * strdup(const char *s); 函数说明:strdup()会先用malloc()配置与参数s 字符串相 ...

  6. js文件的装载和执行

    1.浏览器对script引用的js文件分两步,下载,下载完毕后马上执行:这两步都会阻塞浏览器继续解析. 2.加入defer属性,<script defer type="text/jav ...

  7. iOS - Sign up/in 注册/登录

    1.Sign up/in 1.1 用户登录安全原则 不能在网络上传输用户隐私数据的明文. 不能在本地和服务器上存储用户隐私数据的明文. 1.2 用户登录流程 登录成功之后,应该跳转视图控制器到主页. ...

  8. SAP供应商和客户的创建

    进来遇到一个创建供应商的需求,由于在系统中关于供应商和客户的创建比较特殊,且没有相关函数进行创建, 找到一个类和方法来创建,类名:VMD_EI_API  方法名:MAINTAIN_DIRECT_INP ...

  9. Linux_常用命令_04_挂载

    1. mount [-t vfstype] [-o options] device dir ZC: -o 后面跟多个option的话,用逗号隔开.(例如:"mount -o rw,remou ...

  10. [转载] 【每周推荐阅读】C-Store：列式存储数据库

    Record-based与column-based是数据库和存储系统里面两种不同的data layout.我们的思维逻辑是基于行记录的,即Record-based data layout,数据记录都是 ...