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