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

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

article 2026/3/3 16:21: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>

效果图

在这里插入图片描述

相关文章：

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

【css酷炫效果】纯CSS实现故障文字特效 缘创作背景html结构css样式完整代码基础版进阶版(3D效果) 效果图 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u011561335/90492053 缘 创作随缘&#xff0c;不定时更新。 创作背景 刚…...

编程日记 2026/2/23 20:48:08

SpringSecurity配置(自定义认证过滤器)

文末有本篇文章的项目源码文件可供下载学习 在这个案例中,我们已经实现了自定义登录URI的操作,登录成功之后,我们再次访问后端中的API的时候要在请求头中携带token,此时的token是jwt字符串,我们需要将该jwt字符串进行解析,查看解析后的User对象是否处于登录状态.登录状态下,将…...

编程日记 2026/2/24 4:54:00

设计模式(行为型)-备忘录模式

目录 定义 类图 角色 角色详解 &#xff08;一&#xff09;发起人角色&#xff08;Originator&#xff09;​ &#xff08;二&#xff09;备忘录角色&#xff08;Memento&#xff09;​ &#xff08;三&#xff09;备忘录管理员角色&#xff08;Caretaker&#xff09;​…...

编程日记 2026/2/15 15:31:12

WebAssembly 技术在逆向爬虫中的应用研究

一、引言 1.1 Web 技术发展与性能需求 在当今数字化浪潮中，Web 应用已成为人们生活和工作中不可或缺的一部分。从简单的静态网页到功能复杂的单页面应用（SPA），Web 技术的发展日新月异。随着用户对 Web 应用交互性、实时性和复杂性的要求不断提高，传统的 Web 开发技术面临着…...

编程日记 2026/2/19 2:10:16

Advanced Intelligent Systems 软体机器手助力截肢者玩转鼠标

随着科技的不断进步&#xff0c;假肢技术在改善截肢者生活质量方面取得了显著成就。然而&#xff0c;截肢群体在就业方面仍面临巨大困难&#xff0c;适龄截肢群体的就业率仅为健全群体的一半。现有的肌电控制假肢手在与计算机交互时存在诸多挑战&#xff0c;特别是截肢者在使用…...

编程日记 2026/2/24 6:37:08

pyhton中 字典 元组 列表 集合之间的互相转换

在 Python 中，集合（set）、字典（dict）、元组（tuple）、列表（list）和序列（如字符串 str）之间可以互相转换。以下是它们之间转换的详细方法，涵盖从基础到高级的用法。 1. 列表（list）与其他类型的转换 1.1 列表 → 集合 my_list = [1, 2, 2, 3...

编程日记 2026/2/15 12:53:38

每日Attention学习27——Patch-based Graph Reasoning

模块出处 [NC 25] [link] Graph-based context learning network for infrared small target detection 模块名称 Patch-based Graph Reasoning (PGR) 模块结构 模块特点 使用图结构更好的捕捉特征的全局上下文将图结构与特征切片(Patching)相结合&#xff0c;从而促进全局/…...

编程日记 2026/2/23 23:03:27

理一理Mysql日期

在 MySQL 数据库中&#xff0c;关于日期和时间的类型主要有以下几种&#xff1a; 1. **DATE**: 仅存储日期部分&#xff0c;格式为 YYYY-MM-DD&#xff0c;例如 2023-10-31。 2. **TIME**: 仅存储时间部分&#xff0c;格式为 HH:MM:SS&#xff0c;例如 14:30:00。 3. **DATE…...

编程日记 2026/2/15 0:33:05

数据结构：栈的应用举例——括号匹配的检验

2. 括号匹配的检验 如果表达式中包含括号&#xff0c;当程序中含有这类表达式时&#xff0c;在代码编译过程中&#xff0c;必然会检查括号是否匹配&#xff0c;这是一项必需的语法检查环节。 &#xff08;1&#xff09;迭代版 此处假设表达式中只含有左、右圆括号&#xff0…...

编程日记 2026/2/14 15:43:50

DeepSeek成功的秘诀：谈谈DeepSeek的算法创新

李升伟 整理 DeepSeek 是一家专注于人工智能技术研发的公司&#xff0c;其算法创新在业界引起了广泛关注。以下是 DeepSeek 使用的核心算法及其特点的详细解析&#xff1a; 1. 原生稀疏注意力&#xff08;NSA&#xff09;算法 DeepSeek 提出的 原生稀疏注意力&#xff08;Na…...

编程日记 2026/2/16 8:27:52

初始OpenCV

OpenCV 是一个功能强大、应用广泛的计算机视觉库，它为开发人员提供了丰富的工具和算法，可以帮助他们快速构建各种视觉应用。随着计算机视觉技术的不断发展，OpenCV 也将会继续发挥重要的作用。 OpenCV 提供了大量的计算机视觉算法和图像处理工具，广泛应用于图像和视频的处理…...

编程日记 2026/2/15 7:07:37

深圳南柯电子｜医疗设备EMC检测测试整改：保障患者安全的第一步

在医疗设备领域&#xff0c;电磁兼容性&#xff08;EMC&#xff09;是确保设备安全、有效运行的关键指标。随着医疗技术的飞速发展&#xff0c;医疗设备日益复杂&#xff0c;其电磁环境也愈发复杂多变。EMC检测测试及整改因此成为医疗设备研发、生产、销售过程中不可或缺的一环…...

编程日记 2026/2/27 2:01:10

【笔记】计算机网络——数据链路层

概述 链路是从一个结点到相邻结点的物理路线&#xff0c;数据链路则是在链路的基础上增加了一些必要的硬件和软件实现 数据链路层位于物理层和网络层之间&#xff0c;它的核心任务是在直接相连的节点&#xff08;如相邻的交换机&#xff0c;路由器&#xff09;之间提供可靠且…...

编程日记 2026/2/26 20:11:27

Rust语言介绍和猜数字游戏的实现

文章目录 Rust语言介绍和猜数字游戏的实现cargo是什么使用Rust编写猜数字 Rust语言介绍和猜数字游戏的实现 Rust语言是一种系统编程语言&#xff0c;核心强调安全性、并发性以及高性能&#xff0c;由类似于C/C的底层控制能力&#xff0c;性能也非常接近&#xff0c;Rust有一些…...

编程日记 2026/2/14 19:50:27

STM32-汇编

学习arm汇编的主要目的是为了编写arm启动代码&#xff0c;启动代码启动以后&#xff0c;引导程序到c语言环境下运行。换句话说启动代码的目的是为了在处理器复位以后搭建c语言最基本的需求。因此启动代码的主要任务有&#xff1a; 初始化异常向量表&#xff1b; 初始化各工作模…...

编程日记 2026/2/15 5:48:15

利用通义灵码AI在VS Code中快速开发扫雷游戏：Qwen2.5-Max模型的应用实例

引言 随着人工智能技术的不断进步&#xff0c;开发过程中的自动化程度也在逐步提高。阿里云推出的通义灵码AI程序员&#xff0c;作为一款创新型的智能编程助手&#xff0c;现已全面上线并兼容VS Code、JetBrains IDEs等多种开发环境。本文将介绍如何利用最新的Qwen2.5-Max模型…...

编程日记 2026/2/15 6:20:12

202503执行jmeter压测数据库(ScyllaDB,redis,lindorm,Mysql）

一、Mysql 1 、 准备MySQL 连接内容 2 、 下载连接jar包 准备 mysql-connector-java-5.1.49.jar 放到 D:\apache-jmeter-5.6.3\lib\ext 目录下面； 3 、 启动jmeter ,配置脚本 添加线程组---》JDBC Connection Configuration---》JDBC Request---》查看结果树。 1）测…...

编程日记 2026/2/23 23:17:57

【QT 多线程示例】两种多线程实现方式

文章目录 多线程实现方式一&#xff1a;继承QThread类方式二&#xff1a; 使用QObject::moveToThread()方法 多线程实现 在Qt中&#xff0c;实现多线程编程有两种常见的方式&#xff0c;它们分别是通过继承QThread类和使用QObject::moveToThread()方法。 方式一&#xff1a;继…...

编程日记 2026/2/15 2:41:40

excel文件有两列，循环读取文件两列赋值到字典列表。字典的有两个key,分别为question和answer。将最终结果追加到json文件

import pandas as pd import json import osdef excel_to_json_append(excel_path, json_path):# 1. 读取Excel数据到字典列表df pd.read_excel(excel_path, usecols["question", "answer"])new_data [{"question": str(row["question&qu…...

编程日记 2026/2/15 8:03:44

以太网 MAC 帧格式

文章目录 以太网 MAC 帧格式以太网帧间隔参考 本文为笔者学习以太网对网上资料归纳整理所做的笔记&#xff0c;文末均附有参考链接&#xff0c;如侵权&#xff0c;请联系删除。 以太网 MAC 帧格式 以太网技术的正式标准是 IEEE 802.3&#xff0c;它规定了以太网传输数据的帧结…...

编程日记 2026/2/24 20:37:09

【PCB工艺】基础：电子元器件

电子原理图&#xff08;Schematic Diagram&#xff09;是电路设计的基础&#xff0c;理解电子元器件和集成电路&#xff08;IC&#xff09;的作用&#xff0c;是画好原理图的关键。 本专栏将系统讲解 电子元器件分类、常见 IC、电路设计技巧&#xff0c;帮助你快速掌握电子电路…...

编程日记 2026/3/1 13:40:53

docker 部署elk 设置账号密码

1. 先把 kibana 停掉 2.进入es 容器 docker exec -it 75895a078cbc /bin/bash 找到 bin 目录 执行 ./elasticsearch-setup-passwords interactive 全部设置一样的密码 ,不一样自己要记住&#xff0c;设置成功会输出如下内容 Changed password for user [apm_system] Chang…...

编程日记 2025/7/18 11:29:05

【微信小程序（云开发模式）变通实现DeepSeek支持语音】

整体架构 前端&#xff08;微信小程序&#xff09;&#xff1a; 使用微信小程序云开发能力&#xff0c;实现录音功能。将录音文件上传到云存储。调用云函数进行语音识别和 DeepSeek 处理。界面模仿 DeepSeek&#xff0c;支持文本编辑。 后端&#xff08;云函数 Node.js&#…...

编程日记 2025/7/17 22:45:35

从WebRTC到嵌入式：EasyRTC如何借助大模型提升音视频通信体验

随着人工智能技术的快速发展&#xff0c;WebRTC与大模型的结合正在为音视频通信领域带来革命性的变革。WebRTC作为一种开源实时通信技术&#xff0c;以其低延迟、跨平台兼容性和强大的音视频处理能力&#xff0c;成为智能硬件和物联网设备的重要技术支撑。 而EasyRTC作为基于W…...

编程日记 2026/3/3 2:06:52

前端样式库推广——TailwindCss

官方网址&#xff1a; https://tailwindcss.com/docs/installation/using-vite 中文官方文档&#xff1a;https://www.tailwindcss.cn/ github地址&#xff1a;tailwindcss 正在使用tailwindcss的网站&#xff1a;https://tailwindcss.com/showcase 一看github&#xff0c;竟然…...

编程日记 2026/2/20 12:40:08

Gemini分析屏幕截图时，如何处理图像模态（如界面元素、文字内容）与文本模态（用户指令）的语义对齐？

在通过Gemini大语言模型进行屏幕截图分析时&#xff0c;实现图像模态&#xff08;界面元素/文字内容&#xff09;与文本模态&#xff08;用户指令&#xff09;的语义对齐&#xff0c;需要结合多模态融合技术和领域知识。以下是具体的技术实现路径和挑战应对方案&#xff1a; 1.…...

编程日记 2026/2/21 16:29:58

【6】组合计数学习笔记

前言 关于今天发现自己连快速幂都忘记怎么写这件事 这篇博客是组合计数基础&#xff0c;由于大部分内容都是 6 6 6 级&#xff0c;所以我就给整个提高级的组合数学评了 6 6 6 级。 组合计数基础 加法原理与乘法原理 加法原理&#xff08;分类计数原理&#xff09;&#…...

编程日记 2026/2/15 4:15:30

Ai客服机器人系统源码

我将基于常见的自然语言处理库&#xff0c;用 Python 编写一个简单的 AI 客服机器人功能代码示例&#xff0c;它能处理常见问题并根据用户输入提供相应回复。 import nltk​ from nltk.chat.util import Chat, reflections​ ​ # 下载必要的NLTK数据​ nltk.download(pun…...

编程日记 2026/2/21 21:40:11

Redis——事务实现以及应用场景

本文介绍Redis事务相关的原理以及知识点&#xff0c;从redis的常用命令出发&#xff0c;深入理解redis在日常工作中的实际场景使用用法。 本文目录 一、Redis事务简介二、事务相关命令三、事务应用场景 一、Redis事务简介 Redis 事务本质上是一个命令队列。用户可以使用MULTI命…...

编程日记 2025/9/10 0:02:01

SpringBoot 第二课（Ⅰ） 整合springmvc（详解）

目录 一、SpringBoot对静态资源的映射规则 1. WebJars 资源访问 2. 静态资源访问 3. 欢迎页配置 二、SpringBoot整合springmvc 概述 Spring MVC组件的自动配置 中央转发器&#xff08;DispatcherServlet&#xff09; 控制器&#xff08;Controller&#xff09; 视图解…...

编程日记 2026/3/2 6:54:15