CSS 之 文字交融展开效果

一、简介

​ 本次要介绍的是文字交融展开的CSS动画效果，具体效果如下面的gif图所示。该效果看起来很简单，但实际上实现起来也很简单，其中用到了帧动画、letter-spacing、filter: blur()、filter: contrast()、opacity等相关CSS知识点。

​ 相对于普通的静态文字样式，该效果更加生动有趣，突出重点文字，吸引用户的兴趣和注意力，可以用于网站首页标题、广告宣传等场景。

案例效果：

慢放细节：

二、具体实现

1、实现思路

​ ① 首先要考虑如何将文字重叠在一起，位移、定位都可以做到，但是都太麻烦，可以使用CSS的letter-spacing字间距属性，根据文字具体大小设置为一个合适的负值，将文字重叠在一起。

​ ② 此时文字还仅仅是单纯的重叠，并没有实现融合。因为文字是白底黑字的样式效果，所以可以通过设置文字的blur高斯模糊，结合设置父元素的contrast对比度，去掉文字中因高斯模糊导致整体色值偏向于背景色的部分 ，实现类似于文字融合效果。

③ 接下来实现文字展开效果，由于文字展开需要一个过程，因此可以使用帧动画来实现，定义初始状态和最终状态，通过letter-spacing和blur属性值的变化，将文字从初始融合状态，变为最终的文字展开状态。

​ ④ 在文字元素上使用该帧动画，并通过设置动画的填充模式，使动画结束后，文字能保持在最终展开状态。

​ ⑤ 由于初始状态时，文字完全重叠融合为一个黑色块，为了更好的页面效果，初始使其透明度为0，在页面上不显示，等文字展开到一定程度后再调整透明度显示。

2、实现代码

<!-- dom结构 -->
<p>
  <span>自由 平等 公正 法制 爱国 敬业 诚信 友善</span>
</p>

<!-- css样式 -->
<style>
    /* 定义展开动画  */
    @keyframes TextExpend {
      /* 初始状态 透明度为0 字间距为-39px 高斯模糊度3px */
      /* 此时文字重叠 经过高斯模糊和父元素的高对比度 融合为一个黑色块 为了美观 初始阶段不在页面显示 */
      0% {
        opacity: 0;
        letter-spacing: -39px;
        filter: blur(3px);
      }
      /* 5%时 透明度变为1 */
      /* 此时文字之间有了一定间距 不再是一个黑色块 元素在页面上显示 */
      5% {
        opacity: 1;
      }
      /* 最终状态 透明度为1 字间距为0 模糊度为0 */
      /* 此时文字间距正常 清晰无模糊 在页面正常显示 */
      100% {
        opacity: 1;
        letter-spacing: 0;
        filter: blur(0);
      }
    }
    /* 父元素设置背景颜色为白色 文字居中 对比度为10倍  */
    /* 通过增强对比度 结合文字的高斯模糊 去掉文字中偏向于背景色的部分 达到文字融合的效果 */
    p {
      background: #fff;
      text-align: center;
      filter: contrast(10);
    }
    /* 文字元素 设置文字样式 和 应用TextExpend动画 */
    span {
      color: #000;
      font-size: 50px;
      font-weight: 600;
      text-align: center;
      /* 应用动画  */
      animation: TextExpend 2.5s ease-out;
      /* 记得要设置动画的填充模式 否则动画结束后会回到初始的融合状态 */
      animation-fill-mode: both;
    }
</style>

请关注公众号，查看更多优质资源：