代码如下：

<!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. 成环的概率dp(初级) zoj 3329

    原题地址:https://vjudge.net/problem/ZOJ-3329 题目大意: 有三个骰子,分别有k1,k2,k3个面,初始分数是0.第i骰子上的分数从1道ki.当掷三个骰子的点数分别为 ...

  2. python之地基（三）

    一.引用计数和垃圾回收机制 当一个执行程序完毕后,回收变量所占据的内存. 当引用计数变为0的时候,回收变量所占据的内存. a=100 print(id(a)) a=input('==>:') # ...

  3. 学习笔记_J2EE_Mybatis_01_mybatis入门

    mybatis入门 1.概述 因为觉得自己写的概念信息未必比别人好,而且这些理论知识了解就好,内核信息还是要看源码.所以从相对权威的百度百科转载了基本信息,也因此它的真实性是经过检验的. 1.1 什么 ...

  4. HDU 1060  Leftmost Digit

    Leftmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  5. bootstrap-typeahead 自动补全简单的使用教程

    参考链接: 参考1 : https://segmentfault.com/a/1190000006036166参考2 : https://blog.csdn.net/u010174173/articl ...

  6. pycharm创建scrapy项目教程及遇到的坑

    最近学习scrapy爬虫框架,在使用pycharm安装scrapy类库及创建scrapy项目时花费了好长的时间,遇到各种坑,根据网上的各种教程,花费了一晚上的时间,终于成功,其中也踩了一些坑,现在整理 ...

  7. C++ this指针

    成员函数不能定义 this 形参,而是由编译器隐含地定义.成员函数的函数体可以显式使用 this 指针,但不是必须这么做.如果对类成员的引用没有限定,编译器会将这种引用处理成通过 this 指针的引用 ...

  8. Selenium Webdriver点击事件失效问题

    最近在用selenium webdriver时,遇到一个棘手的问题,点击事件有时候会失效,具体原因我也不知道是什么. 但是有两个解决办法,第一,在点击该标签前,先点击它的父标签,也就是点击两次. dr ...

  9. SpringCloud使用Sofa-lookout监控(基于Eureka)

    本文介绍SpringCloud使用Sofa-lookout,基于Eureka服务发现. 1.前景 本文属于是前几篇文章的后续,其实一开始感觉这个没有什么必要写的,但是最近一个朋友问我关于这个的问题,所 ...

  10. 乞丐版JAVA扫雷

    事先声明:本人是一位刚接触Java不久的菜鸟,所以代码写的略显臃肿,敬请谅解!这个扫雷是我在暑假时做的,灵感来源于csdn上某位大神的博客,不过我个人实在不喜欢他的代码实现,于是我自己写了一个实现上不 ...