CSS文字故障效果

ziblog

已于 2025-06-27 15:28:53 修改

阅读量239

点赞数 4

CC 4.0 BY-SA版权

文章标签： css 前端

于 2025-04-30 14:49:44 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147632841

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文字故障效果</title>
<style>
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
}

.glitch {
position: relative;
color: #fff;
font-size: 5rem;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
animation: glitch 500ms infinite;
}

.glitch span {
position: absolute;
top: 0;
left: 0;
}

.glitch span:first-child {
animation: glitch 650ms infinite;
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
transform: translate(-0.025em, -0.0125em);
opacity: 0.8;
}

.glitch span:last-child {
animation: glitch 375ms infinite;
clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
transform: translate(0.0125em, 0.025em);
opacity: 0.8;
}

@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
}
14% {
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
}
15% {
text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
}
49% {
text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
}
50% {
text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
0.05em 0 0 rgba(0, 255, 0, 0.75),
0 -0.05em 0 rgba(0, 0, 255, 0.75);
}
99% {
text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
0.05em 0 0 rgba(0, 255, 0, 0.75),
0 -0.05em 0 rgba(0, 0, 255, 0.75);
}
100% {
text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
-0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
-0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
}
}

/* 链接样式 */
.link {
position: absolute;
bottom: 20px;
color: #fff;
font-size: 1rem;
text-decoration: none;
opacity: 0.5;
transition: opacity 0.3s;
}

.link:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="glitch">
GLITCH EFFECT
<span>GLITCH EFFECT</span>
<span>GLITCH EFFECT</span>
</div>


</body>
</html>