【转载】CSS3 文字溶解效果
2017-09-14 19:18
543 查看
![](https://images2017.cnblogs.com/blog/50603/201709/50603-20170914191620782-1854297220.gif)
代码如下:
<!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文字效果推荐
- 如何利用CSS3制作3D文字效果
- css3 html5文字霓虹灯交替闪烁效果
- css3实现文字描边的效果
- css3 实现图片遮罩效果,hover出现文字
- jquery使用CSS3实现文字动画效果插件Textillate.js
- CSS3利用text-shadow属性实现多种效果的文字样式展现方法
- css3之animation制作闪烁文字效果 转
- css3实现图片遮罩效果鼠标hover以后出现文字
- CSS3下的渐变文字效果实现
- 用CSS3实现文字描边效果【效果在这儿,创意在你!】
- CSS3| 制作文字波浪线效果
- CSS3 的文字阴影效果
- 纯css3 transforms 3D文字翻开翻转3D开放式效果
- 纯CSS3文字效果推荐
- 了解CSS3的文字阴影效果 - Text Shadow effects
- 纯css3艺术文字样式效果代码
- 纯CSS3文字效果推荐
- 第95天:CSS3 边框、背景和文字效果
- CSS3制作文字半透明倒影效果