一、实现效果
二、实现原理
1.设置文字颜色为透明
2.设置一个背景
3.背景裁剪为文字
4.通过animation和关键帧实现背景大小的变化
三、代码展示
<!DOCTYPE html>
<html>
<head>
<style>
.text-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.textBox {
width: 100px;
height: 100px;
word-wrap: break-word;
}
.textBox span {
font-size: 20pxpx;
color: transparent;
background-image: linear-gradient(to right, #f12711, #f5af19, #f12711);
background-repeat: no-repeat;
-webkit-background-clip: text;
background-size: 100% 100%;
animation: bg 5s linear;
position: relative;
}
@keyframes bg {
0% {
background-size: 0% 100%;
}
100% {
background-size: 100% 100%;
}
}
</style>
</head>
<body>
<div class="text-container">
<div class="textBox">
<span
>白日依山尽，黄河入海流白日依山尽，黄河入海流白日依山尽，黄河入海流白日依山尽，黄河入海流</span
>
</div>
</div>
</body>
</html>
四、扩展，即将出现的文字给一个高斯模糊
1.效果：
2.代码
<!DOCTYPE html>
<html>
<head>
<style>
.text-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.textBox {
font-size: 128px;
color: transparent;
background-image: linear-gradient(to right, #f12711, #f5af19, #f12711);
background-repeat: no-repeat;
-webkit-background-clip: text;
background-size: 100% 100%;
animation: bg 5s linear;
position: relative;
}
.textBox::after {
content: "";
position: absolute;
top: 0;
left: 0px; /* 伪元素从右边开始，但隐藏起来 */
width: 0px;
height: 100%;
background-image: inherit; /* 继承容器的背景 */
filter: blur(15px); /* 应用高斯模糊效果 */
animation: dynamicWidth 5s linear;
}
@keyframes dynamicWidth {
0% {
left: 0;
width: 40px;
}
100% {
left: 100%;
width: 0;
}
}
@keyframes bg {
0% {
background-size: 0% 100%;
}
100% {
background-size: 100% 100%;
}
}
</style>
</head>
<body>
<div class="text-container">
<h1 class="textBox">白日依山尽，黄河入海流</h1>
</div>
</body>
</html>
五、在行内元素中使用实现可换行效果
<!DOCTYPE html>
<html>
<head>
<style>
.text-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.textBox {
width: 120px;
height: 100px;
word-wrap: break-word;
}
.textBox span {
font-size: 20px;
color: transparent;
background-image: linear-gradient(to right, #f12711, #f5af19, #f12711);
background-repeat: no-repeat;
-webkit-background-clip: text;
background-size: 100% 100%;
animation: bg 5s linear;
position: relative;
}
@keyframes dynamicWidth {
0% {
left: 0;
}
100% {
left: 100%;
}
}
@keyframes bg {
0% {
background-size: 0% 100%;
}
100% {
background-size: 100% 100%;
}
}
</style>
</head>
<body>
<div class="text-container">
<div class="textBox">
<span>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</span>
</div>
</div>
</body>
</html>
