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

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

news 来源：原创 2025/8/10 14:34:29

【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效果) 效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492053 缘创作随缘，不定时更新。创作背景刚…...

编程日记 2025/8/10 14:34:29

【Java】链表（LinkedList）（图文版）

本博客总结了Java当中链表的实现，以及相关方法的使用，在最后附带了一些常见链表相关处理技巧，希望对你有帮助！ ps：可拷贝到IDEA上自行测试，代码全部完成测试。一.链表概述 1.什么是链表？ 链…...

编程日记 2025/8/7 13:58:35

审批工作流系统xFlow

WorkFlow-审批流程系统该项目为完全开源免费项目可用于学习或搭建初始化审批流程系统希望有用的小伙伴记得点个免费的star gitee仓库地址仿钉钉飞书工作审批流系统介绍前端技术栈: vue3 ts vite arcodesign eslint 后端技术栈:springbootspring mvc mybatis mavenmysq…...

编程日记 2025/8/10 14:34:28

UNION，UNION ALL 的详细用法

目录一、基本概念二、核心区别三、语法使用规则四、代码实演示 4.1 两张表字段相同，字段顺序也相同 4.2 两张表字段相同。但字段顺序不同 4.3 两张表存在相同字段，但一张表字段多，一张表字段少一、基本概念操作符功能描述去重处…...

编程日记 2025/8/10 11:23:30

Java 集合遍历过程中修改数据触发 Fail-Fast 机制，导致报ConcurrentModificationException异常

Java Fail-Fast 机制 Fail-Fast 机制是 Java 集合框架中的一种错误检测机制，用于在遍历集合时检测结构修改。如果在迭代器创建之后，集合被修改（例如添加或删除元素），并且这种修改不是通过迭代器自身的 remove() 方法进…...

编程日记 2025/8/4 1:18:11

1、获取当前日期的前一天 // 获取当前日期let today new Date();today.setDate(today.getDate() - 1);// 转换为本地日期字符串格式let yesterdayStr today.toISOString().slice(0, 10);console.log(yesterdayStr); // 例如: "2023-04-03" (格式取决于地区设置) 2…...

编程日记 2025/8/10 6:35:03

自动驾驶背后的数学：特征提取中的线性变换与非线性激活

在上一篇博客「自动驾驶背后的数学：从传感器数据到控制指令的函数嵌套」—— 揭秘人工智能中的线性函数、ReLU 与复合函数中，我们初步探讨了自动驾驶技术中从传感器数据到控制指令的函数嵌套流程，其中提到了特征提取模块对传感器数据进行线性…...

编程日记 2025/8/6 8:10:24

DNS解析查询工具

dig命令 1 常用命令命令：dig 您的域名（示例：dig www.baidu.com） 2、根据解析记录查询，比如MX，CNAME，NS，PTR等，只需将类型加在命令后面即可。示例：dig bai…...

编程日记 2025/8/10 10:32:15

【eNSP实战】（续）一个AC多个VAP的实现—将隧道转发改成直接转发

在一个AC多个VAP的实现—CAPWAP隧道转发此篇文章配置的基础上，将隧道转发改成直接转发一、改成直接转发需要改动的配置 （一）将连接AP的接口改成trunk口，并允许vlan100、101、102通过 [AC1]interface GigabitEthernet 0/0/8 …...

编程日记 2025/8/10 2:28:21

解决远程卡在下载vscode-server的问题，一键安装脚本

vscode-server 下载与安装脚本 vscode-server一键安装脚本简介此脚本用于下载并安装指定提交 ID 和架构的 VS Code Server。用户可以选择不同的架构，并输入对应的 VS Code 提交 ID 来下载和安装 vscode-server。VS Code提交ID可以在VS Code界面“帮助>关于…...

编程日记 2025/8/10 14:33:36

【unity实战】用unity封装一个复杂全面且带不同射击模式的飞机大战射击系统

考虑到每个人基础可能不一样，且并不是所有人都有同时做2D、3D开发的需求，所以我把【零基础入门unity游戏开发】分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。【C#篇】：主要讲解C#的基础语法，包括变量、数据类型、运算符、流程控制、面向对象等，适合没有编程基础的…...

编程日记 2025/8/6 12:40:40

LeetCode[42] 接雨水

动态规划 left_max[i] height[i]左侧的最高高度right_max[i] height[i]右侧的最高高度height[i]能接多少水？min(left_max[i], right_max[i])-height[i] class Solution { public:int trap(vector<int>& height) {int len height.size();vector<in…...

编程日记 2025/8/10 14:31:06

c++ 基础题目lambda

1. auto lambda = [](double x) { return static_cast<int>(x); }; 是匿名函数对象 ,不可直接声明 a.可以赋值给一个与其类型兼容的 std::function 类型的对象 std::function<int(int, int)> lambda = [](int x, int y) { return x + y; }; b.使用具体的 lambda …...

编程日记 2025/8/3 1:18:28

RTSP/Onvif安防视频EasyNVR平台 vs.多协议接入视频汇聚EasyCVR平台：设备分组的区别

EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力，能对接入的视频流进行处理与多端分发，包括RTSP、RTMP、HTTP-FLV、W…...

编程日记 2025/8/10 1:24:30

网络编程套接字【端口号/TCPUDP/网络字节序/socket编程接口/UDPTCP网络实验】

网络编程套接字 0. 前言1. 认识端口号2. 认识TCP和UDP协议3. 网络字节序4. socket编程接口5. 实现一个简单的UDP网络程序5.1 需求分析5.2 头文件准备5.3 服务器端设计5.4 客户端设计5.5 本地测试5.6 跨网络测试5.7 UDP小应用——客户端输入命令，服务器端执行 6. 地址…...

编程日记 2025/8/10 13:17:19

【C语言预编译处理精选题】

C语言预编译处理精选题一、选择易错题1.1 纯文本替换，注意优先级！1.2 再来一道文本替换，别马虎1.3 宏定义的替换1.4带参数宏定义的空格问题1.5 " "的include1.6 条件编译1.7 预编译概念二、填空易错题2.1 注意两个连续的 i2.2 异…...

编程日记 2025/8/8 5:46:03

云钥科技工业相机定制服务，助力企业实现智能智造

在工业自动化、智能制造和机器视觉快速发展的今天，工业相机作为核心感知设备，其性能直接决定了检测精度、生产效率和产品质量。然而，标准化工业相机往往难以满足复杂多样的应用场景需求，‌工业相机定制‌逐渐成为企业突破技术瓶颈…...

编程日记 2025/8/9 11:03:03

用了Cline和华为云的大模型，再也回不去了

这两年AI火热，受影响最大的还是程序员群体，因为编程语言是高度形式化的，完全可以用BNF等形式精确地定义，不像自然语言那样，容易出现歧义。另外开源是软件界的潮流，GitHub上有海量的开源代码可供AI来训练&am…...

编程日记 2025/8/9 13:55:31

vs2017版本与arcgis10.1的ArcObject SDK for .NET兼容配置终结解决方案

因电脑用的arcgis10.1,之前安装的vs2010正常能使用AO和AE，安装vs2017后无法使用了，在重新按照新版本arcgis engine或者arcObject费时费力，还需要重新查找资源。用vs2017与arc10.1的集成主要两个问题，1：安装后vs中没有…...

编程日记 2025/8/8 19:09:39

Java对接微信支付全过程详解

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/8/9 1:18:40

微软 System Center Configuration Manager（SCCM）的组件文件

微软 System Center Configuration Manager（SCCM）或 Microsoft Endpoint Configuration Manager（MECM）的组件文件，属于企业级设备管理工具的一部分。以下是具体说明： C:\Windows\CCM\smsswd.exe C:\Windows\CCM\tsmanager.exe smsswd.exe 和 tsmanager.exe 是 Micros…...

编程日记 2025/8/6 1:13:39

C语言和C++到底有什么关系？

C 读作“C 加加”，是“C Plus Plus”的简称。顾名思义，C 就是在 C 语言的基础上增加了新特性，玩出了新花样，所以才说“Plus”，就像 Win11 和 Win10、iPhone 15 和 iPhone 15 Pro 的关系。 C 语言是 1972 年由美国贝…...

编程日记 2025/8/6 13:43:26

10.PE导出表

一：定位导出表 PIMAGE_NT_HEADERS->OptionalHeader->DataDirectory[0] typedef struct _IMAGE_DATA_DIRECTORY {DWORD VirtualAddress; // 导出表的RVADWORD Size; // 导出表大小（没用） } IMAGE_DATA_DIRECTORY, *PIMAGE_DATA_DIRECTORY; 该结构的Vi…...

编程日记 2025/8/9 17:15:43

springBoot中不添加依赖 , 手动生成一个token ,并校验token,在统一拦截器中进行校验 (使用简单 , 但是安全性会低一点)

要在 Spring Boot 里实现接口统一拦截并校验 Token，可以借助 Spring 的拦截器机制。下面是具体的实现步骤和代码示例。 1. 创建 Token 工具类 import java.nio.charset.StandardCharsets; import java.security.MessageDigest; import java.security.NoSuchAlgori…...

编程日记 2025/8/8 21:05:49

VSCode C/C++ 环境搭建指南

一、前言 Visual Studio Code（简称 VSCode）是一款轻量级且功能强大的跨平台代码编辑器，凭借丰富的插件生态和高度的可定制性，深受开发者喜爱。对于 C/C 开发者而言，在 VSCode 中搭建开发环境，能够获得灵活…...

编程日记 2025/8/9 22:03:00

ES6（4） Map 集合详解

1. Map 集合简介 Map 是 ES6 提供的一种新的键值对数据结构，与普通对象（Object）不同，Map 的键可以是任意类型（包括对象、函数等）。 2. 创建 Map 集合可以使用 new Map() 创建一个 Map，并在括…...

编程日记 2025/8/5 11:10:24

DeepSeek私有化部署与安装浏览器插件内网穿透远程访问实战

文章目录前言1. 本地部署OllamaDeepSeek2. Page Assist浏览器插件安装与配置3. 简单使用演示4. 远程调用大模型5. 安装内网穿透6. 配置固定公网地址前言最近，国产AI大模型Deepseek成了网红爆款，大家纷纷想体验它的魅力。但随着热度的攀升&#xff0c…...

编程日记 2025/8/9 8:07:47

【设计模式】建造者模式

三、建造者模式 3.3 建造者模式建造者(Builder) 模式也称构建器模式、构建者模式或生成器模式，同工厂模式或原型模式一样，也是一种创建型模式。建造者模式比较复杂，不太常用，但这并不表示不需要了解和掌握该模式。建造者模式…...

编程日记 2025/8/8 7:37:42

一场由 ES 分片 routing 引发的问题

一场由 ES 分片 routing 引发的问题 ES 结构 {"poroperties": {"joinType": {"type": "join","eager_global_ordinals": true,"relations": {"spu": "sku"}},"id":{"type&q…...

编程日记 2025/8/5 16:02:33

搭建Python量化开发环境：从零开始的完整指南

搭建Python量化开发环境：从零开始的完整指南在量化投资领域，一个稳定且高效的开发环境是成功的关键。本文将引导你一步步搭建起自己的Python量化开发环境，确保你能够顺利开始编写和运行量化策略。 🚀量化软件开通 &#x1f68…...

编程日记 2025/8/7 11:39:01

JavaScript日期区间计算：精准解析年月日差异

一、应用场景与功能概述在日常的制作项目或者是练习，我们经常需要计算两个日期之间的精确时间差。本文将通过一个JavaScript日期计算函数，详细解析如何实现精准的年/月/日差异计算，并探讨实际开发中的常见问题和解决方案。二、核心功能解…...

编程日记 2025/8/9 6:33:24

大数据学习（71）-三范式构成

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一…...

编程日记 2025/8/6 5:11:50

el-table 插槽踩过的坑：slot-scope 和#default的区别

slot-scope和#default是Vue中用于定义插槽的两种不同语法，它们在Vue 2和Vue 3中有不同的应用场景和语法规则。‌ slot-scope 在‌Vue 2.x‌中，slot-scope是用于声明具名插槽并获取父组件传递过来的数据的主要方式。通过slot-scope可以定义一个变量scop…...

编程日记 2025/8/4 1:36:52

Linux一键安装node.js【脚本】

node.js一般不用系统的apt安装，而是用nvm这个前端的应用商店安装 node.js是js环境，nvm是安装nodejs管理器。npm是nodejs里的包管理器，安装模块的，类似于python的pip 把以下代码复制保存在一个文件里比如nano install_nodejs.sh …...

编程日记 2025/8/10 1:26:35

vue3:pinia安装及其使用

一、安装 Pinia 的步骤 1、安装 Pinia npm install pinia 2、在 Vue 应用中引入 Pinia 在 main.js 中引入并注册 Pinia： import { createApp } from vue; import { createPinia } from pinia; import App from ./App.vue;const app createApp(App); app…...

编程日记 2025/8/5 7:21:43

vue2升级Vue3--native、对inheritAttrs作用做以解释、声明的prop属性和未声明prop的属性

native取消在 Vue 3 中，v-on 的 .native 修饰符已经被移除。在 Vue 2 中，.native 修饰符用于在组件的根元素上监听原生 DOM 事件，但在 Vue 3 中，这一行为发生了变化。在 Vue 3 中，所有未在子组件的 emits 选项中定…...

编程日记 2025/8/9 19:16:16

【漫话机器学习系列】146.Softmax 激活函数（Softmax Activation Function）

Softmax 激活函数详解 1. Softmax 函数概述 Softmax 函数（Softmax Activation Function）是一种常用于多分类任务的激活函数，广泛应用于机器学习和深度学习模型，特别是在神经网络的输出层。它的主要作用是将输入的多个实数值转换…...

编程日记 2025/8/6 18:59:33

解决：ModuleNotFoundError: No module named ‘_sqlite3‘

报错： from _sqlite3 import * ModuleNotFoundError: No module named _sqlite3安装sqlite3支持组件: sudo apt-get install libsqlite3-dev进入之前下载的python包下，重新编译和安装Python ./configure --enable-loadable-sqlite-extensions make &a…...

编程日记 2025/8/5 22:42:57

C++差分风暴：区间修改终极模板

目录 🔥 差分核心价值 🌟 一维差分模板 1. 核心思想 2. 代码实现 3. 动态图示 📦 二维差分模板 1. 核心公式 2. 代码实现 3. 二维修改示意图 🚨 六大避坑指南 💡 复杂度对比 🌈 LeetCode实战 &…...

编程日记 2025/8/9 7:30:44

easypoi导入Excel兼容日期和字符串格式的日期和时间

问题场景在使用easypoi导入Excel时，涉及到的常用日期会有yyyy-MM-dd HH:mm:ss、yyyy-MM-dd和HH:mm:ss，但是Excel上面的格式可不止这些，用户总会输入一些其他格式，如如果在定义verify时用下面这种格式定义，那么总会…...

编程日记 2025/8/5 1:19:42

《保险科技》

自己在保险行业工作很多年，只是接触了一些数据的内容，对于保险业务的知识了解的很少，想通过这本书补充一下，但是发现这本书就是一些知识的拼接。先将保险的历史，后讲保险的定义，然后就是吹嘘保险行业和互联…...

编程日记 2025/8/7 14:06:16

QT编程之HTTP服务端与客户端技术

一、HTTP 服务器实现方案 ‌QtWebApp 集成‌ 将QtWebApp源码的 httpserver 目录导入项目，并在 .pro 文件中添加 include ($$PWD/httpserver/httpserver.pri)‌。配置 WebApp.ini 文件定义服务参数（IP、端口、线程池等），通过 HttpL…...

编程日记 2025/8/3 17:17:03

每日一题--计算机网络

一、基础概念类问题 1. TCP 和 UDP 的区别是什么？ 回答示例： TCP：面向连接、可靠传输（通过三次握手建立连接，丢包重传）、保证数据顺序（如文件传输、网页访问）。 UDP：无…...

编程日记 2025/8/5 20:48:10

IIS 服务器日志和性能监控

Internet Information Services （IIS） 是 Microsoft 提供的一款功能强大、灵活且可扩展的 Web 服务器，用于托管网站、服务和应用程序。IIS 支持 HTTP、HTTPS、FTP、SMTP 和更多用于提供网页的协议，因此广泛用于企业环境。 IIS 的…...

编程日记 2025/8/1 23:05:43

Unity学习之Shader总结（一）

一、Lesson1 1、渲染流水线 （1）应用阶段模型->模型处理（应用阶段）–>输入结构应用阶段主要操作：粗粒度剔除、进行渲染设置、准备基本数据、输出到几何阶段 （2）几何阶段输入结构-&…...

编程日记 2025/8/6 10:16:57

java，poi，提取ppt文件中的文字内容

注意，不涉及图片处理。先上pom依赖： <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.3</version></dependency><!--…...

编程日记 2025/8/10 6:12:30