当前位置：首页 > article >正文

【css酷炫效果】纯CSS实现故障文字特效

article 2025/3/28 9:10:07

【css酷炫效果】纯CSS实现故障文字特效

缘
创作背景
html结构
css样式
完整代码
- 基础版
- 进阶版(3D效果)
效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492053

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<h1 class="glitch-text" data-text="ERROR 404">ERROR 404</h1>

css样式

.glitch-text {
  font-size: 5rem;
  font-weight: 900;
  position: relative;
  color: #fff;
  text-transform: uppercase;
  animation: glitch 1s infinite steps(3);
}

/* 主文字层 */
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 红色偏移层 */
.glitch-text::before {
  left: 2px;
  text-shadow: 
    0.05em 0 0 #ff0055,

    -0.05em -0.05em 0 #00aaff;
  animation: glitch-before 0.6s infinite steps(2);
}

/* 蓝色偏移层 */
.glitch-text::after {
  left: -2px;
  text-shadow: 

    -0.05em 0 0 #00aaff,
    0.05em 0.05em 0 #00ff99;
  animation: glitch-after 0.8s infinite steps(4);
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes glitch-before {
  0% { clip-path: inset(20% 0 30% 0); }
  100% { clip-path: inset(10% 0 40% 0); }
}

@keyframes glitch-after {
  0% { clip-path: inset(40% 0 10% 0); }
  100% { clip-path: inset(30% 0 20% 0); }
}

完整代码

基础版

<!DOCTYPE html>
<html lang="en"> 
<head>

<title>页面特效</title>
<style type="text/css">
.glitch-text {
  font-size: 5rem;
  font-weight: 900;
  position: relative;
  color: #fff;
  text-transform: uppercase;
  animation: glitch 1s infinite steps(3);
}

/* 主文字层 */
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 红色偏移层 */
.glitch-text::before {
  left: 2px;
  text-shadow: 
    0.05em 0 0 #ff0055,

    -0.05em -0.05em 0 #00aaff;
  animation: glitch-before 0.6s infinite steps(2);
}

/* 蓝色偏移层 */
.glitch-text::after {
  left: -2px;
  text-shadow: 

    -0.05em 0 0 #00aaff,
    0.05em 0.05em 0 #00ff99;
  animation: glitch-after 0.8s infinite steps(4);
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes glitch-before {
  0% { clip-path: inset(20% 0 30% 0); }
  100% { clip-path: inset(10% 0 40% 0); }
}

@keyframes glitch-after {
  0% { clip-path: inset(40% 0 10% 0); }
  100% { clip-path: inset(30% 0 20% 0); }
}
</style>

</head>
<body>

	<h1 class="glitch-text" data-text="ERROR 404">ERROR 404</h1>

</body>
</html>

进阶版(3D效果)

<!DOCTYPE html>
<html lang="en"> 
<head>

<title>页面特效</title>
<style type="text/css">
.glitch-text {
  left: 200px;
  font-size: 5rem;
  font-weight: 900;
  position: relative;
  color: #fff;
  text-transform: uppercase;
  animation: glitch 1s infinite steps(3);
}

/* 主文字层 */
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 红色偏移层 */
.glitch-text::before {
  left: 2px;
  text-shadow: 
    0.05em 0 0 #ff0055,

    -0.05em -0.05em 0 #00aaff;
  animation: glitch-before 0.6s infinite steps(2);
}

/* 蓝色偏移层 */
.glitch-text::after {
  left: -2px;
  text-shadow: 

    -0.05em 0 0 #00aaff,
    0.05em 0.05em 0 #00ff99;
  animation: glitch-after 0.8s infinite steps(4);
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes glitch-before {
  0% { clip-path: inset(20% 0 30% 0); }
  100% { clip-path: inset(10% 0 40% 0); }
}

@keyframes glitch-after {
  0% { clip-path: inset(40% 0 10% 0); }
  100% { clip-path: inset(30% 0 20% 0); }
}

.glitch-text {
  transform: perspective(500px);
  animation: 
    glitch 1s infinite steps(3),
    rotate 5s linear infinite;
}

@keyframes rotate {
  25% { transform: perspective(500px) rotateY(5deg); }
  75% { transform: perspective(500px) rotateY(-5deg); }
}


</style>

</head>
<body>

	<h1 class="glitch-text" data-text="ERROR 404">ERROR 404</h1>

</body>
</html>