代码如下：

  1. <!DOCTYPE html>
  2. <html >
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>CodePen - word animation | word filter</title>
  7. <style>
  8. * {
  9.   box-sizing: border-box;
  10. }
  11.  
  12. html, body {
  13.   height: 100%;
  14.   width: 100%;
  15.   background-color: black;
  16.   padding:0;
  17.   margin:0;
  18. }
  19.  
  20. .container {
  21.   width: 100%;
  22.   height: 100%;
  23.   position: relative;
  24.   filter: contrast(20);
  25.   background-color: black;
  26.   overflow: hidden;
  27. }
  28.  
  29. h1 {
  30.   font-family:consolas, 黑体;
  31.   color: white;
  32.   font-size: 4rem;
  33.   text-transform: uppercase;
  34.   line-height: 1;
  35.   animation: letterspacing 5s infinite alternate ease-in-out;
  36.   display: block;
  37.   position: absolute;
  38.   left: 50%;
  39.   top: 40%;
  40.   transform: translate3d(-50%, -50%, 0);
  41.   letter-spacing: -2rem;
  42.   white-space:nowrap;
  43.   padding:0;
  44.   margin:0;
  45. }
  46.  
  47. @keyframes letterspacing {
  48.   0% {
  49.     letter-spacing: -2rem;
  50.     filter: blur(1rem);
  51.     color:red;
  52.   }
  53.   50% {
  54.     filter: blur(0.5rem);
  55.   }
  56.   80% {
  57.     letter-spacing: .5rem;
  58.     filter: blur(0.1rem);
  59.     color: #fff;
  60.   }
  61.   100% {
  62.     letter-spacing: 0.5rem;
  63.     filter: blur(0rem);
  64.     color: #fff;
  65.   }
  66. }
  67. </style>
  68.  
  69. </head>
  70.  
  71. <body>
  72.  
  73. <div class="container">
  74.   <h1>ABCDE 中文测试</h1>
  75. </div>
  76.  
  77. </body>
  78. </html>
  79.

参考来源：http://www.cnblogs.com/coco1s/p/7519460.html

【转载】CSS3 文字溶解效果的更多相关文章

  1. CSS3文字立体效果

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. css3 文字闪动效果

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

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

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

  4. 常用CSS3效果：用text-shadow做CSS3 文字描边

    思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...

  5. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

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

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

  7. CSS环绕球体的旋转文字-3D效果

    代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...

  8. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  9. Esfog_UnityShader教程_溶解效果Dissolve

    溶解效果在游戏中是很常见的,比如在一些神话或者魔法世界中,一些NPC角色在剧情需要时候会身体会渐渐的消失掉.甚至有一些更炫的,比如用火焰喷射器把目标燃尽.这些都可以用到溶解效果.这篇文章主要是讲解一下 ...

随机推荐

  1. STM32L1X系列GPIO运用

    STM32L15x 系列中基本步骤是和STM32F10x相同的 一 配置GPIO 初始化GPIO时我们需要催一下内容进行配置(以下步骤没有必然顺序) 1 创建GPIO结构 GPIO_InitTypeD ...

  2. Linux密码重置

    在启动菜单选择启动内核: 按e编辑,编辑修改两处:ro改为rw,和找到rhgb quiet一行: 把rhgb quiet替换为init=/bin/bash(临时生效): 按CTRL+X进入单用户模式: ...

  3. pkuwc2018题解

    题解: 思路挺好想的..然而今天写代码写成傻逼了 d1t1: 首先比较暴力的就是$f[i][j]$表示i个这个点是j的概率 然后前缀和一下dp就是$n^2$的 部分分树形态随机就说明树深度是$log$ ...

  4. hbase参数配置和说明

    版本:0.94-cdh4.2.1 hbase-site.xml配置 hbase.tmp.dir 本地文件系统tmp目录,一般配置成local模式的设置一下,但是最好还是需要设置一下,因为很多文件都会默 ...

  5. P2733 家的范围 Home on the Range-弱DP

    P2733 家的范围 Home on the Range 思路 :转化为以每个点为右下角的 最大正方形的边长 #include<bits/stdc++.h> using namespace ...

  6. 七、OpenStack—dashboard组件安装

    1.安装包# yum install openstack-dashboard2.编辑 /etc/openstack-dashboard/local_settings 文件 需要更改的几处内容如下: ) ...

  7. 三、OpenStack创建域,项目,用户和角色，验证，创建客户端脚本

    一.Identity服务为每个OpenStack服务提供身份验证服务. 身份验证服务使用域,项目,用户和 角色的组合. 1.创建service 项目 # openstack project creat ...

  8. java自动化-关键字驱动在junit接口自动化的应用

    本文是继承上文的基础上进行的讨论,建议读者先阅读http://www.cnblogs.com/xuezhezlr/p/9097137.html和https://www.cnblogs.com/xuez ...

  9. Hibernte

    什么是CRM?(了解) CRM(customer relationship management)即客户关系管理,是指企业用CRM技术来管理与客户之间的关系.在不同场合下,CRM可能是一个管理学术语, ...

  10. Git SSL公钥密钥生成

    下面教大家简单易懂的五步配置好密钥 第一次配置ssh 和ssl git config --global --list 查看git的配置 步骤: 1. git config --global user. ...