【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>