效果如图(借鉴抖音logo风格):
关键点:
CSS属性:mix-blend-mode
此属性会使文本重叠部分为白色
代码:
HTML
<div class="text-container">
<div class="Line"></div>
</div>
CSS:
.text-container {
position: relative;
margin: 100px auto;
width: 310px;
height: 100px;
font-size: 70px;
background-color: black;
transform: scale(2);
line-height: 100px;
}
.Line {
position: absolute;
width: 100%;
height: 1px;
background: #000;
z-index: 1;
animation: LineMove 5s ease-out infinite;
}
.text-container::before {
position: absolute;
content: "GlitchArt";
top: 0;
left: 0px;
color: red;
text-shadow: 1px 0 0 red;
animation: move 0.95s infinite;
}
.text-container::after {
position: absolute;
content: "GlitchArt";
top: 0;
left: -3px;
color: cyan;
text-shadow: -1px 0 0 cyan;
animation: move 1.1s infinite 0.2s;
mix-blend-mode: lighten;
}
@keyframes LineMove {
9% {
top: 38px;
}
14% {
top: 8px;
}
18% {
top: 42px;
}
22% {
top: 1px;
}
32% {
top: 32px;
}
34% {
top: 12px;
}
40% {
top: 26px;
}
43% {
top: 7px;
}
99% {
top: 30px;
}
}
@keyframes move {
10% {
top: -0.4px;
left: -1.1px;
}
20% {
top: 0.4px;
left: -0.2px;
}
30% {
left: .5px;
}
40% {
top: -0.3px;
left: -0.7px;
}
50% {
left: 0.2px;
}
60% {
top: 1.8px;
left: -1.2px;
}
70% {
top: -1px;
left: 0.1px;
}
80% {
top: -0.4px;
left: -0.9px;
}
90% {
left: 1.2px;
}
100% {
left: -1.2px;
}
}
想要了解更多相关内容可以跳转到此文章
——————————————————————————————————
结语:若文章有错误的地方,烦请在评论区指出。当然,我会不定时的重新编辑写过的文章,查错及优化,希望能将最好的文章展现给读者。