【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>
效果图
