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>css">
* {
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="css">--text-color: hsl(60, 50%, 50%); --delay: 0">I'm lazy-sheep-king!</h1>
<h1 data-text="Welcome to my blog!" style="css">--text-color: hsl(180, 50%, 50%); --delay: 1">Welcome to my blog!</h1>
<h1 data-text="Thank you for you support!" style="css">--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; 以达到将原文字隐藏的目的。
（其实我觉得这个光标效果不是很搭，去掉更好，但是为了与上一篇文章联系起来就保留了）
添加关键帧
css">@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>css">
* {
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="css">--text-color: hsl(60, 50%, 50%); --delay: 0">I'm lazy-sheep-king!</h1>
<h1 data-text="Welcome to my blog!" style="css">--text-color: hsl(180, 50%, 50%); --delay: 1">Welcome to my blog!</h1>
<h1 data-text="Thank you for you support!" style="css">--text-color: hsl(300, 50%, 50%); --delay: 2">Thank you for you
support!</h1>
</body>
</html>
