【转载】CSS3 文字溶解效果

Posted on 2017-09-14 19:18 PHP-张工阅读(590) 评论(0) 编辑收藏举报

代码如下：

<!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

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

历史上的今天：
2010-09-14 WebQQ2.0

ZjFree-自由自在

公告

搜索

最新随笔

积分与排名

随笔分类 (385)

阅读排行榜

推荐排行榜

【转载】CSS3 文字溶解效果