效果如图（借鉴抖音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; } } 结语：若文章有错误的地方，烦请在评论区指出。当然，我会不定时的重新编辑写过的文章，查错及优化，希望能将最好的文章展现给读者。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/217985.html原文链接：https://javaforall.net
