代码如下：

<!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. Ubuntu 14.04 升级 nginx/1.8.1

    参考文档:https://segmentfault.com/a/1190000008116875 https://www.ilanni.com/?p=11788 先停止nginx服务 service ...

  2. 末学者笔记--apache编译安装及LAMP架构上线

    apache介绍 一．Apache的三种工作模式 Apache一共有3种稳定的MPM模式(多进程处理模块),它们分别是prefork.worker.event.http-2.2版本的httpd默认的m ...

  3. Zabbix（二）

    zabbix 监控第一台服务器 https://blog.51cto.com/5001660/2136303 一.搭建一台测试服务器 1.安装一台centos7操作系统 配置网络: vim /etc/ ...

  4. Angular 项目列表页

    $ ng g m project 功能:项目列表显示,增加,修改,删除项目.邀请其它人员加入项目. 单一性原则:希望搭建多个组件,每个组件负责自己的功能. 一.project相关组件 $ ng g c ...

  5. python 将png图片格式转换生成gif动画

    先看知乎上面的一个连接 用Python写过哪些[脑洞大开]的小工具? https://www.zhihu.com/question/33646570/answer/157806339 这个哥们通过爬气 ...

  6. P1462 通往奥格瑞玛的道路 最短路

    题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡奥格瑞玛 题目描述 在艾泽拉斯, ...

  7. SpringBoot与日志框架2（日志内斗）

    一.SpringBoot如何引入slf4j+logback框架的呢? 在POM文件中 <dependency> <groupId>org.springframework.boo ...

  8. CodeForces 510C Fox And Names (拓扑排序)

    <题目链接> 题目大意: 给你一些只由小写字母组成的字符串,现在按一定顺序给出这些字符串,问你怎样从重排字典序,使得这些字符串按字典序排序后的顺序如题目所给的顺序相同. 解题分析:本题想到 ...

  9. 《团队作业》五小福团队--UNO的博客链接汇总

    <团队作业>五小福团队--UNO的博客链接汇总 <团队作业第一周>五小福团队作业--UNO <团队作业第二周>五小福团队作业--UNO <团队作业第三.第四周 ...

  10. flask 中使用 socket 遇到的坑

    很久没用博客园了,最近涉及到一个问题,需要向前端推送日志 考虑的方案两个,一个是定时ajax 但是这样效率太慢了,二是用socket 那看看有没有轮子咯,面向百度编程,有两个库可以使用 1.flask ...