CSS 文字交融展开效果

自由 平等 公正 诚信 友善

相对于普通的静态文字样式，这个动画效果能让页面瞬间 “活” 起来，能让重点文字从繁杂的内容里 “跳” 出来，牢牢抓住用户的眼球和注意力，可以用在网站首页的核心标题上，能第一时间传递品牌核心信息；或者用在电商平台的广告标题或促销标语里，能让优惠信息更有冲击力。

代码如下：

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

实现思路

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

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

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

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

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

来源：https://mp.weixin.qq.com/s/asoHpZDusjf_KkSBBrw7SQ

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/33_2158