代码如下：

<!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. Docker commit 命令保存的镜像文件太大的问题

    基础镜像: centos7.5 进入容器后, 先后安装了 jdk1.8, maven3.6.0, git, rocketmq4.3.2 安装完成后使用 docker commit 命令保存为镜像 结果 ...

  2. 自定义URL Protocol 协议

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\fuck] @="fuck Protocol" "URL ...

  3. nand flash和nor flash的区别

    NOR和NAND是现在市场上两种主要的非易失闪存技术. Intel于1988年首先开发出NOR flash技术,彻底改变了原先由EPROM和EEPROM一统天下的局面. 东芝于1989年开发出NAND ...

  4. python3 代理设置

    前言: 用过很多种代理使用方式,这里总结一下. 1.urllib+socks5的代理1 from sockshandler import SocksiPyHandler import socks fr ...

  5. Django----博客文章数据返回

    步骤1:新建视图函数 from django.shortcuts import render from django.http import HttpResponse; from blog.model ...

  6. yum安装k8s集群(kubernetes)

    此案例是以一个主,三个node来部署的,当然node可以根据自己情况部署 192.168.1.130 master 192.168.1.131 node1 192.168.1.132 node2 19 ...

  7. Ubuntu 服务器设置软件多用户访问

    假设在用户A下安装了软件xx 路径写入$home/.bashrc 这时该软件只有该用户可以使用 若要其他用户也能使用,只需要将该.bashrc拷贝到其他user的$home目录就行了

  8. Android滑动列表(拖拽，左滑删除，右滑完成)功能实现（1）

    场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...

  9. idea设置调用方法时提示方法注释

    如图所示:打开file-->setting-->Editor-->General,搜索show,然后勾选上Show quick documentation on mouse move ...

  10. H5 _拖放使用

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