当前位置：首页 > article >正文

CSS——文字渐入效果

article 2024/10/11 12:39:32

CSS——文字渐入效果

昨天制作了文字的打字机效果（CSS——文字打字机效果），然后我想到有些网页的文字效果是平滑渐入的，我就去思考这样的实现方式，其实就把之前的steps()函数去掉即可，但是我想换种实现方式。之前是使用伪元素遮住父元素，这次我选择使用父元素占位，然后通过逐步显示伪元素来实现这个效果，同时还用到了响应式布局，使得在缩放页面的时候也能够保证文字不会加载到屏幕之外。

文字渐入效果

基本思路

使用父元素占位，然后通过逐步显示伪元素；
使用 clac() 计算函数以及相对单位 vw 动态调整字体的大小。

实现步骤

基础的设置

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字填入效果</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: hsl(280, 50%, 30%);
      font-family: 'Times New Roman', Times, serif;
    }

    h1 {
      position: relative;
      font-size: calc(0.5rem + 3vw);
      line-height: 2em;
      letter-spacing: .1em;
      text-wrap: nowrap;
      color: transparent;
    }

    h1::before {
      content: attr(data-text);
      position: absolute;
      width: 0;
      height: 100%;
      border-right: 5px solid var(--text-color);
      text-wrap: nowrap;
      overflow: hidden;
      color: var(--text-color);
      text-shadow: 0.05em 0.05em 0.05em hsla(0, 0%, 0%, .5);
    }
  </style>
</head>

<body>
  <h1 data-text="I'm lazy-sheep-king!" style="--text-color: hsl(60, 50%, 50%); --delay: 0">I'm lazy-sheep-king!</h1>
  <h1 data-text="Welcome to my blog!" style="--text-color: hsl(180, 50%, 50%); --delay: 1">Welcome to my blog!</h1>
  <h1 data-text="Thank you for you support!" style="--text-color: hsl(300, 50%, 50%); --delay: 2">Thank you for you
    support!</h1>
</body>

</html>

注意的是，这里使用font-size: calc(0.5rem + 3vw);动态设置文字的大小，使用line-height: 2em设置行高，这里使用相对单位em，所以行高也会随着文字大小的变化而变化，最后对父元素和伪元素使用text-wrap: nowrap，确保文字不会换行。
我们还为伪元素使用 content: attr(data-text) 获取自定义属性中的值（即将伪元素的内容设置为于其父元素一致），使用 overflow: hidden;将超出"已加载"部分的文本隐藏，与之前不同，现在使用border-right设置光标，不过这里不方便给光标设置圆角，不如使用伪元素简单（当然，这里可以继续像之前一样使用::after伪元素设置光标）。父元素设置 color: transparent; 以达到将原文字隐藏的目的。
在这里插入图片描述
（其实我觉得这个光标效果不是很搭，去掉更好，但是为了与上一篇文章联系起来就保留了）

添加关键帧

@keyframes moving {
  to {
    width: 100%;
  }
}

@keyframes flashing {
  to {
    border-color: transparent;
  }
}
h1::before {
  animation: moving 3s calc(var(--delay) * 3s) linear forwards, flashing 0.5s infinite alternate;
}

这里同样使用计算函数clac()设置不同的延时，使其依次播放，然后额外设置“光标闪烁”的效果，我们当然可以改动 -- text-color 的值以达到光标闪烁的目的，但是这同样会影响文字的颜色，所以不要为了改变而改变，这里我们改变最基础的 border-color 来实现此效果。

结语

创作不易，感谢支持；如有错误，恳请指出，希望与大家共同进步！

源码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字填入效果</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: hsl(280, 50%, 30%);
      font-family: 'Times New Roman', Times, serif;
    }

    h1 {
      position: relative;
      font-size: calc(0.5rem + 3vw);
      line-height: 2em;
      letter-spacing: .1em;
      color: transparent;
    }

    h1::before {
      content: attr(data-text);
      position: absolute;
      width: 0;
      height: 100%;
      border-right: 5px solid var(--text-color);
      text-wrap: nowrap;
      overflow: hidden;
      animation: moving 3s calc(var(--delay) * 3s) linear forwards, flashing 0.5s infinite alternate;
      color: var(--text-color);
      text-shadow: 0.05em 0.05em 0.05em hsla(0, 0%, 0%, .5);
    }

    @keyframes moving {
      to {
        width: 100%;
      }
    }

    @keyframes flashing {
      to {
        border-color: transparent;
      }
    }
  </style>
</head>

<body>
  <h1 data-text="I'm lazy-sheep-king!" style="--text-color: hsl(60, 50%, 50%); --delay: 0">I'm lazy-sheep-king!</h1>
  <h1 data-text="Welcome to my blog!" style="--text-color: hsl(180, 50%, 50%); --delay: 1">Welcome to my blog!</h1>
  <h1 data-text="Thank you for you support!" style="--text-color: hsl(300, 50%, 50%); --delay: 2">Thank you for you
    support!</h1>
</body>

</html>