废话不多说，先上效果图。产生的纹理是实际效果哦，神奇吧！
核心要点就是将三个文本层绝对定位到相同位置，然后使用滤镜的对比度与模糊组合拳，通过一定的延迟计算得到，也算是老生常谈的技巧，非常之简单！直接上代码吧。
<main>
<p class="text" style="--i:1">Where</p>
<p class="text" style="--i:2">possible</p>
<p class="text" style="--i:3">begins</p>
</main>
@import url("https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap");
main {
height: 100vh;
background:#333;
filter: contrast(30);
position: relative;
.text {
--text-node-count: 3;
--single-duration: 1.2s;
color: #fff;
font-size: 8em;
font-family: "Protest Revolution", sans-serif;
font-weight: 400;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
letter-spacing: 4px;
animation: ani calc(var(--text-node-count) * var(--single-duration))
infinite;
animation-delay: calc(
(var(--i) * var(--single-duration)) - var(--text-node-count) *
var(--single-duration)
);
}
}
@keyframes ani {
0%,
100% {
color: #fff;
filter: blur(0);
opacity: 1;
}
35%,
55% {
filter: blur(35px);
opacity: 0;
}
}
附加一个codepen
有用的话，给大鹅点点赞、点点认可、发发评论啦~
