代码如下：

<!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. Python迭代器、生成器

    迭代器 iterator # 只要是能被for循环的数据类型 就一定拥有__iter__方法 # 迭代器多了的方法 print(set(dir([].__iter__()))-set(dir([])) ...

  2. foot

    码云链接:https://gitee.com/zyyyyyyyyyyy/codes/rcfdzmin4a82v975pl1ko47 效果图: 原网站截图: 源代码: <!DOCTYPE html ...

  3. 洛谷 P3366 【模板】最小生成树

    题目链接 https://www.luogu.org/problemnew/show/P3366 题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: ...

  4. [转]Go里面的unsafe包详解

    Golang的unsafe包是一个很特殊的包. 为什么这样说呢? 本文将详细解释. 来自go语言官方文档的警告 unsafe包的文档是这么说的: 导入unsafe的软件包可能不可移植,并且不受Go 1 ...

  5. GO语言一行代码实现反向代理

    本文,介绍了什么是反向代理,如何用go语言实现反向代理. 至于他的标题, "GO语言一行代码实现反向代理 | Writing a Reverse Proxy in just one line ...

  6. OpenSSL MD5 API

    #include <stdlib.h> #define _GNU_SOURCE /* for getline API */ #include <stdio.h> /* Open ...

  7. 二、自动化测试平台搭建-搭建jango环境

    上篇说的是安装虚拟环境,后面的项目全部放在虚拟环境上 1.创建一个虚拟环境py3,进入虚拟环境 2.安装django包:pip install django==1.8.2 3.在家目录下的Deskto ...

  8. MySQL系列

    目录: 一.初识数据库 二.库相关操作 三.表相关操作 四.记录相关操作 五.数据备份.pymysql模块 六.视图.触发器.事务.存储过程.函数 七.ORM框架SQLAlchemy 八.索引原理与慢 ...

  9. <玩转Django2.0>读书笔记:模板和模型

    1. 模板内置标签 Django常用内置标签 标签 描述 {% for %} 遍历输出变量的内容 {% if %} 对变量进行条件判断 {% csrf_token %} 生成csrf_token标签, ...

  10. 关于DataTable序列化的事儿

    今天写了一个小demo,从数据库中读取到了dataTable,想序列化成json字符串,然后传到前端,进行页面展示,其实很简单的一个步骤,谁知道它出错了!!! 出错的原因是:序列化类型为XX的对象时检 ...