有趣的CSS - 一串乱码

news2024/11/15 11:03:40

大家好，我是 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;
  }
}