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 yousupport!</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 yousupport!</h1>
</body></html>
