【CSS】文字交融展开

田本初

于 2024-08-08 10:52:19 发布

阅读量282

点赞数 5

分类专栏： HTML5 CSS3 文章标签： css 前端

本文链接：https://blog.csdn.net/owo_ovo/article/details/141020207

版权

CSS3 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML5

8 篇文章 0 订阅

订阅专栏

实现如下效果，仅需一个动画几行代码
在这里插入图片描述
首先给文本元素添加动画

letter-spacing：初始文本堆在一起，结束展开文本
filter：初始模糊，结束清晰

然后给文本的父元素设置对比度，简单理解为亮的更亮暗的更暗。

以上样式均可通过控制台细微调整

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background: #000;
    }

    .container {
      margin-top: 50px;
      text-align: center;
      background-color: #000;
      filter: contrast(30);
    }

    .text {
      font-size: 100px;
      color: #fff;
      animation: showup 3s forwards;
    }

    @keyframes showup {
      from {
        letter-spacing: -50px;
        filter: blur(10px);
      }

      to {
        letter-spacing: 0;
        filter: blur(0);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <span class="text">Hello World</span>
  </div>
</body>

</html>