代码如下：

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

  <title>CodePen - word animation | word filter</title>

<style>

* {

  box-sizing: border-box;

}

html, body {

  height: 100%;

  width: 100%;

  background-color: black;

  padding:0;

  margin:0;

}

.container {

  width: 100%;

  height: 100%;

  position: relative;

  filter: contrast(20);

  background-color: black;

  overflow: hidden;

}

h1 {

  font-family:consolas, 黑体;

  color: white;

  font-size: 4rem;

  text-transform: uppercase;

  line-height: 1;

  animation: letterspacing 5s infinite alternate ease-in-out;

  display: block;

  position: absolute;

  left: 50%;

  top: 40%;

  transform: translate3d(-50%, -50%, 0);

  letter-spacing: -2rem;

  white-space:nowrap;

  padding:0;

  margin:0;

}

@keyframes letterspacing {

  0% {

    letter-spacing: -2rem;

    filter: blur(1rem);

    color:red;

  }

  50% {

    filter: blur(0.5rem);

  }

  80% {

    letter-spacing: .5rem;

    filter: blur(0.1rem);

    color: #fff;

  }

  100% {

    letter-spacing: 0.5rem;

    filter: blur(0rem);

    color: #fff;

  }

}

</style>

</head>

<body>

<div class="container">

  <h1>ABCDE 中文测试</h1>

</div>

</body>

</html>

参考来源：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. lr 中cookie的解释与用法

    Loadrunner 中 cookie 解释与用法loadrunner 中与 cookie 处理相关的常用函数如下: web_add_cookie(): 添加新的 cookie 或者修改已经存在的 c ...

  2. python介绍及下载

    python介绍 Python是一种计算机程序设计语言.是一种面向 对象的动态类型语言,支出被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多的被用于独立的.大型醒 ...

  3. Scyther-manual ------BNF

    1.Scyther 协议安全模型的验证实例 第一部分:  打开协议模型 ,设置攻击变量的参数执行分析 Scyther  is a tool for the formal analysis o the ...

  4. 图的最小环floyed

    最优的路线 问题描述 学校里面有N个景点.两个景点之间可能直接有道路相连,用Dist[I,J]表示它的长度:否则它们之间没有直接的道路相连.这里所说的道路是没有规定方向的,也就是说,如果从I到J有直接 ...

  5. 关于Python 解包，你需要知道的一切

    解包在英文里叫做 Unpacking,就是将容器里面的元素逐个取出来(防杠精:此处描述并不严谨,因为容器中的元素并没有发生改变)放在其它地方,好比你老婆去菜市场买了一袋苹果回来分别发给家里的每个成员, ...

  6. Spark SQL官网阅读笔记

    Spark SQL是Spark中用于结构化数据处理的组件. Spark SQL可以从Hive中读取数据. 执行结果是Dataset/DataFrame. DataFrame是一个分布式数据容器.然而D ...

  7. About Why Inline Member Function Should Defined in The Header File

    About why inline member function should defined in the header file. It is legal to specify inline on ...

  8. SharePoint修改左上角文字的命令行

    $webapp = Get-SPWebApplication “http://test-spweb1” --需要修改的站点$webapp.SuiteNavBrandingText = “XXXXXX” ...

  9. 多项式 之 快速傅里叶变换(FFT)/数论变换(NTT)/常用套路【入门】

    原文链接https://www.cnblogs.com/zhouzhendong/p/Fast-Fourier-Transform.html 多项式 之 快速傅里叶变换(FFT)/数论变换(NTT)/ ...

  10. 关于<Servlet>定义

    1,百度百科定义:             Servlet,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于交互式地浏览和生成数据,生成动态Web内容 ...