有趣的CSS - 一串乱码-编程知识

有趣的CSS - 一串乱码

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是通过 css 来实现一段不停变化的 bug 乱码效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

通过 animation 配合伪元素搭配 content 属性来实现字符变换，实现一段字符不停更换。

适用于网页异常状态等场景应用。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="font25">The Bug!</div>

一个 div 标签，div 内文字元素为英文字符最好。

css 部分代码

.font25{position: relative;font-size: 24px;font-weight: 900;color: #1630f1;letter-spacing: 10px;background-color: #ffffff;
}
.font25:after{content: '';position: absolute;top: 0;z-index: 10;background-color: inherit;  /* 继承背景色使伪元素遮挡住后面 */animation: text-ani25 2.4s linear infinite;animation-delay: 2s;
}
@keyframes text-ani25{0%{content: "$-";left: 0;}5%{content: ";y";left: 0;}10%{content: "*&#H";left: 0;}15%{content: "-!);";left: 0;}20%{content: "#$_}-'";left: 0;}25%{content: ":0^!$.";left: 0;}30%{content: "#{+.-?#u";left: 0;}35%{content: "f7*%}-;#";left: 0;}40%{content: "^='?'*$!";left: 0;}45%{content: "+0^&!`^-";left: 0;}50%{content: "&-?>-=|`";left: 0;}55%{content: "u<|:#-";left: auto;right: 0;}60%{content: ";~0![,";left: auto;right: 0;}65%{content: ")+->";left: auto;right: 0;}70%{content: "+.=d";left: auto;right: 0;}75%{content: "&%";left: auto;right: 0;}80%{content: "`@";left: auto;right: 0;}85%{content: "-";left: auto;right: 0;}90%{content: "#";left: auto;right: 0;}95%{content: "";left: 0;}100%{content: "";left: 0;}
}

用 :after 配合 content 属性，设置 animation 的参数让 content 内的字符进行变化，实现视觉上一种乱码的效果。

这里要注意的是 content 内的字符长度不能超过主体 div 内字符的长度，也是前面为什么说主体 div 内的文字元素最好是英文字符的原因，为的是保持视觉上的统一。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>一串乱码</title></head><body><div class="app"><div class="font25">The Bug!</div></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.font25{position: relative;font-size: 24px;font-weight: 900;color: #1630f1;letter-spacing: 10px;background-color: #ffffff;
}
.font25:after{content: '';position: absolute;top: 0;z-index: 10;background-color: inherit;animation: text-ani25 2.4s linear infinite;animation-delay: 2s;
}
@keyframes text-ani25{0%{content: "$-";left: 0;}5%{content: ";y";left: 0;}10%{content: "*&#H";left: 0;}15%{content: "-!);";left: 0;}20%{content: "#$_}-'";left: 0;}25%{content: ":0^!$.";left: 0;}30%{content: "#{+.-?#u";left: 0;}35%{content: "f7*%}-;#";left: 0;}40%{content: "^='?'*$!";left: 0;}45%{content: "+0^&!`^-";left: 0;}50%{content: "&-?>-=|`";left: 0;}55%{content: "u<|:#-";left: auto;right: 0;}60%{content: ";~0![,";left: auto;right: 0;}65%{content: ")+->";left: auto;right: 0;}70%{content: "+.=d";left: auto;right: 0;}75%{content: "&%";left: auto;right: 0;}80%{content: "`@";left: auto;right: 0;}85%{content: "-";left: auto;right: 0;}90%{content: "#";left: auto;right: 0;}95%{content: "";left: 0;}100%{content: "";left: 0;}
}