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

【css酷炫效果】纯CSS实现火焰文字特效

article 2026/3/3 0:59:11

【css酷炫效果】纯CSS实现火焰文字特效

  • 缘
  • 创作背景
  • html结构
  • css样式
  • 完整代码
    • 基础版
    • 进阶版(冰霜版)
  • 效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492005

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

	<div class="fire-text"><h1 data-text="燃起来了！">燃起来了！</h1></div>

css样式

body {background: #000;min-height: 100vh;display: flex;justify-content: center;align-items: center;margin: 0;
}
.fire-text h1 {font-size: 5rem;font-family: Arial Black, sans-serif;color: #ff4500;position: relative;text-align: center;
}
.fire-text h1::before,
.fire-text h1::after {content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;height: 100%;mix-blend-mode: screen; /* 混合模式增强层次 */
}/* 第一层火焰 */
.fire-text h1::before {filter: blur(2px) hue-rotate(-20deg);animation: fire 1s ease-in-out infinite;
}/* 第二层火焰 */
.fire-text h1::after {filter: blur(4px) hue-rotate(20deg);animation: fire 1s ease-in-out infinite reverse;
}
@keyframes fire {0%, 100% {filter: blur(2px) hue-rotate(0deg);transform: scale(1);}50% {filter: blur(5px) hue-rotate(30deg);transform: scale(1.05);opacity: 0.8;}
}
.fire-text {filter: drop-shadow(0 0 10px rgba(255,69,0,0.5))drop-shadow(0 0 20px rgba(255,165,0,0.3));
}

完整代码

基础版

<!DOCTYPE html>
<html lang="en"> 
<head><title>页面特效</title>
<style type="text/css">
body {background: #000;min-height: 100vh;display: flex;justify-content: center;align-items: center;margin: 0;
}
.fire-text h1 {font-size: 5rem;font-family: Arial Black, sans-serif;color: #ff4500;position: relative;text-align: center;
}
.fire-text h1::before,
.fire-text h1::after {content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;height: 100%;mix-blend-mode: screen; /* 混合模式增强层次 */
}/* 第一层火焰 */
.fire-text h1::before {filter: blur(2px) hue-rotate(-20deg);animation: fire 1s ease-in-out infinite;
}/* 第二层火焰 */
.fire-text h1::after {filter: blur(4px) hue-rotate(20deg);animation: fire 1s ease-in-out infinite reverse;
}
@keyframes fire {0%, 100% {filter: blur(2px) hue-rotate(0deg);transform: scale(1);}50% {filter: blur(5px) hue-rotate(30deg);transform: scale(1.05);opacity: 0.8;}
}
.fire-text {filter: drop-shadow(0 0 10px rgba(255,69,0,0.5))drop-shadow(0 0 20px rgba(255,165,0,0.3));
}
</style></head>
<body><div class="fire-text"><h1 data-text="燃起来了！">燃起来了！</h1></div></body>
</html>

进阶版(冰霜版)

<!DOCTYPE html>
<html lang="en"> 
<head><title>页面特效</title>
<style type="text/css">
body {background: #000;min-height: 100vh;display: flex;justify-content: center;align-items: center;margin: 0;
}
.fire-text h1 {font-size: 5rem;font-family: Arial Black, sans-serif;color: #ff4500;position: relative;text-align: center;
}
.fire-text h1::before,
.fire-text h1::after {content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;height: 100%;mix-blend-mode: screen; /* 混合模式增强层次 */
}/* 第一层火焰 */
.fire-text h1::before {filter: blur(2px) hue-rotate(-20deg);animation: fire 1s ease-in-out infinite;
}/* 第二层火焰 */
.fire-text h1::after {filter: blur(4px) hue-rotate(20deg);animation: fire 1s ease-in-out infinite reverse;
}
@keyframes fire {0%, 100% {filter: blur(2px) hue-rotate(0deg);transform: scale(1);}50% {filter: blur(5px) hue-rotate(30deg);transform: scale(1.05);opacity: 0.8;}
}
.fire-text {filter: drop-shadow(0 0 10px rgba(255,69,0,0.5))drop-shadow(0 0 20px rgba(255,165,0,0.3));
}h1 {color: #00ffff;filter: hue-rotate(180deg);
}</style></head>
<body><div class="fire-text"><h1 data-text="燃起来了！">燃起来了！</h1></div></body>
</html>

效果图

在这里插入图片描述
在这里插入图片描述

相关文章：

【css酷炫效果】纯CSS实现火焰文字特效

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

编程日记 2026/3/3 0:59:11

【java面型对象进阶】------继承实例

继承结构下的标准Javabean 代码如下&#xff1a; package demo10;//定义员工父类 public class Employee {private String id;private String name;private double salary;//构造方法public Employee(){}public Employee(String id,String name,double salary){this.idid;thi…...

编程日记 2026/3/3 22:59:24

Oracle 19c 子分区表索引测试

一、建表语句放在最后&#xff0c;方便查看 二、创建各类索引 --创建本地的主键约束&#xff0c;但必须加上分区键、子分区键MT_O_CODE,M_YMD alter table MS_DMG.A_RED drop constraint MGR_PK_AREAD ; alter table MS_DMG.A_RED add constraint MGR_PK_AREAD primary key …...

编程日记 2026/2/15 23:33:54

【数据分享】1999—2023年地级市固定资产投资和对外经济贸易数据（Shp/Excel格式）

在之前的文章中&#xff0c;我们分享过基于2000-2024年《中国城市统计年鉴》整理的1999-2023年地级市的人口相关数据、染物排放和环境治理相关数据、房地产投资情况和商品房销售面积相关指标数据、社会消费品零售总额和年末金融机构存贷款余额、各类用地面积、地方一般公共预算…...

编程日记 2026/2/15 7:49:14

Spring Boot 与 Couchbase 整合教程

精心整理了最新的面试资料和简历模板&#xff0c;有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 Spring Boot 与 Couchbase 整合教程 环境要求 JDK 8Spring Boot 2.7.xCouchbase Server 7.xMaven/Gradle 步骤 1&#xff1a;创建Spring Boot项目 使用 st…...

编程日记 2025/12/29 12:51:51

数据结构——串、数组和广义表

串、数组和广义表 1. 串 1.1 串的定义 串(string)是由零个或多个字符组成的有限序列。一般记为 S a 1 a 2 . . . a n ( n ≥ 0 ) Sa_1a_2...a_n(n\geq0) Sa1​a2​...an​(n≥0) 其中&#xff0c;S是串名&#xff0c;单引号括起来的字符序列是串的值&#xff0c; a i a_i a…...

编程日记 2026/2/21 3:20:04

Spring中DI与IOC的关系解析

在Spring框架中&#xff0c;DI&#xff08;依赖注入&#xff09;和IOC&#xff08;控制反转&#xff09;是两个核心概念&#xff0c;它们密切相关但有不同的侧重点。 IOC&#xff08;控制反转&#xff09; IoC 是一种设计原则&#xff0c;将对象的创建和依赖管理交给框架或容…...

编程日记 2026/2/15 12:39:32

pycharm-python國際象棋遊戲代碼

嗯&#xff0c;用户的问题是“pycharm寫關於python國際象棋遊戲代碼”&#xff0c;也就是要用PyCharm来写一个Python的国际象棋游戏代码。我需要先整理一下用户提供的搜索结果&#xff0c;看看有什么相关的信息可以利用。 首先看搜索结果中的各个网页内容。网页1主要讲的是象棋…...

编程日记 2026/2/25 16:34:15

【Java代码审计 | 第十四篇】MVC模型、项目结构、依赖管理及配置文件概念详解

未经许可&#xff0c;不得转载。 文章目录 MVC模型模型&#xff08;Model&#xff09;视图&#xff08;View&#xff09;控制器&#xff08;controller&#xff09;MVC工作流程 项目结构java目录resources目录webapp目录 依赖管理配置文件 MVC模型 MVC&#xff08;Model-View-…...

编程日记 2026/3/3 4:48:49

单片机ADC+NTC温度采集电路学习

文章目录 前言一、NTC是什么&#xff1f;二、NTC重要参数三、实际应用举例四、NTC和PTC的区别总结 前言 NTC常用来检测外部环境或者电池温度&#xff0c;及汽车水温传感器。 有时候电池并不内置NTC&#xff0c;所以需要外置NTC来采集电池温度&#xff0c;注意要紧贴电池&#…...

编程日记 2026/2/16 5:20:54

【Spring Boot 中 `@Value` 注解的使用】

文章目录 一、前言二、Value 注解简介三、Value 注解的常见用法1. 读取 application.properties 或 application.yml 配置值&#xff08;1&#xff09;配置文件示例&#xff08;2&#xff09;Java 代码示例&#xff08;3&#xff09;测试输出 2. 使用 Value 设置默认值3. 读取系…...

编程日记 2026/2/14 20:39:07

分布式数据库系统（DDBS）

分布式数据库系统&#xff08;DDBS&#xff09; (Distributed Database System)的概念及其特点&#xff1a; 分布式数据库系统是一种数据库系统&#xff0c;它将数据分散存储在多个地理上分散的节点上&#xff0c;通过一个全局数据库管理系统&#xff08;DBMS&#xff09;来协调…...

编程日记 2026/2/15 19:31:58

2025年，电脑还需要分区吗？

随着2025年的到来&#xff0c;电脑存储空间已经不像以前那么金贵&#xff0c;固态硬盘&#xff08;SSD&#xff09;容量更大、速度更快&#xff0c;云存储也成了日常标配。许多人开始质疑&#xff1a;电脑还需要像以前那样分区吗&#xff1f; 一、分区到底是什么意思&#xff…...

编程日记 2026/2/21 13:35:15

一个成功的Git分支模型

本作品原发布账号为【白鸽子中文网】&#xff0c;现转至当前账号【飞翔中文网】。 反思备录(2020/3/5) 这个模型构思于2010年&#xff0c;现已过去10余年&#xff0c;(2010年)那时正处于Git诞生后不久。在这10年间&#xff0c;git-flow(本文中提到的分支模型) 在许多软件队伍里…...

编程日记 2026/2/15 4:09:00

Kafka可视化工具KafkaTool工具的使用

Kafka Tool工具 介绍 使用Kafka的小伙伴&#xff0c;有没有为无法直观地查看 Kafka 的 Topic 里的内容而发过愁呢&#xff1f;下面推荐给大家一款带有可视化页面的Kafka工具&#xff1a;Kafka Tool &#xff08;目前最新版本是 3.0.2&#xff09; 注意&#xff1a;以前叫Kafk…...

编程日记 2026/2/28 17:39:20

【嵌入式Linux】基于ArmLinux的智能垃圾分类系统项目

目录 1. 功能需求2. Python基础2.1 特点2.2 Python基础知识2.3 dict嵌套简单说明 3. C语言调用Python3.1 搭建编译环境3.2 直接调用python语句3.3 调用无参python函数3.4 调用有参python函数 4. 阿里云垃圾识别方案4.1 接入阿里云4.2 C语言调用阿里云Python接口 5. 香橙派使用摄…...

编程日记 2026/3/1 8:43:16

同等学力申硕-计算机专业-数学基础-历年真题和答案解析

同等学力申请硕士学位考试是比较适合在职人员的提升学位方式&#xff0c;了解过的人应该都知道&#xff0c;现在社会的竞争压力越来越大&#xff0c;为了提高职业生存能力&#xff0c;提升学位在所难免。 为了通过同等学力申请硕士学位考试&#xff0c;对于计算机专业的人来说…...

编程日记 2025/12/14 5:12:34

网络安全漏洞与修复 网络安全软件漏洞

文章目录 一、软件漏洞的概念 1、信息安全漏洞简述2、软件漏洞3、软件漏洞概念4、软件漏洞的成因分析 二、软件漏洞标准化管理 1、软件漏洞分类2、软件漏洞分级3、安全漏洞管理规范 一、软件漏洞的概念 1、信息安全漏洞简述 信息安全漏洞是信息安风险的主要根源之一&…...

编程日记 2026/3/1 8:38:54

STM32：Default_Handler问题

记录代码进入Default_Handler错误的解决办法 一、 问题表述 在一次调试代码的时候&#xff0c;发现代码卡死在启动文件 startup_at32f423xx_.s 的367行&#xff0c;即 B. 处B.是汇编代码&#xff0c;B&#xff1a;跳转到一个标号&#xff0c;这里跳转到一个‘.’&#xff0c;…...

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

iwebsec-SQL数字型注入

1.判断是否存在漏洞 添加and 11发现正常显示&#xff0c;添加and 12无回显条目&#xff0c;则存在sql注入漏洞 2.因为有回显&#xff0c;尝试union联合注入&#xff0c;使用order by判断出有3个字段 3.使用union联合注入查看回显位&#xff0c;发现3三个字段均有回显&#xff…...

编程日记 2026/2/17 12:12:55

基于Spring Boot的冷链物流系统的设计与实现的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2026/2/19 12:34:13

LLM(6)：理解词嵌入

深度神经网络模型&#xff0c;包括 LLM&#xff0c;无法直接处理原始文本。由于文本是分类的&#xff0c;它与用于实现和训练神经网络的数学操作不兼容。因此&#xff0c;我们需要一种方法来将词语表示为连续值向量。 注意&#xff1a;如果读者对向量和张量不太了解&#xff0c…...

编程日记 2026/2/27 19:44:02

SQLMesh系列教程：利用date_spine宏构建日期序列实践指南

引言&#xff1a;为什么需要日期维度表&#xff1f; 在数据分析和报表开发中&#xff0c;日期维度表是不可或缺的基础结构&#xff0c;其中包括一定日期范围的日期序列&#xff0c;每个序列包括对应日期属性&#xff0c;如年季月日、是否周末等。无论是计算日粒度销售额、分析…...

编程日记 2026/2/17 10:40:28

sqlite mmap

https://www.sqlite.org/mmap.html 1. 内存映射 I/O 的基本原理 默认机制&#xff08;传统 I/O&#xff09; SQLite 默认通过 xRead() 和 xWrite() 方法&#xff08;对应 read()/write() 系统调用&#xff09;访问数据库文件。这些方法需要将数据从内核缓冲区复制到用户空间&am…...

编程日记 2026/2/20 10:58:14

Java 大视界 -- 企业数字化转型中的 Java 大数据战略与实践（93）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2026/3/1 7:28:21

Unity Enlighten与Progressive GPU Lightmapper对比分析

一、技术背景与核心差异 1. 算法原理 Enlighten 基于辐射度算法&#xff08;Radiosity&#xff09;&#xff0c;通过将场景分解为Systems&#xff08;光照关联单元&#xff09;和Clusters&#xff08;计算单元&#xff09;&#xff0c;预计算光照环境中的间接光传输。其核心是…...

编程日记 2026/2/19 18:23:55

linux:环境变量,进程地址空间

一.命令行参数 main的参数&#xff1a;int argc,char*argv[]&#xff0c;char*env[] 1.参数意义&#xff1a; argc是命令行调用次程序时传递的参数 例&#xff1a; ls -l -a 传递了三个参数&#xff0c;“ls" "-l" "-a"三个字符串 argv是传递的参…...

编程日记 2026/2/15 13:43:41

mybatis集合映射association与collection

官方文档&#xff1a;MyBatis的一对多关联关系 一、用途 一对一&#xff1a;association 一对多&#xff1a;collection 二、association 比较容易理解&#xff0c;可参考官方文档 三、collection <?xml version"1.0" encoding"UTF-8"?> &l…...

编程日记 2026/2/15 10:18:33

【AIGC】Win10系统极速部署Docker+Ragflow+Dify

【AIGC】WIN10仅3步部署DockerRagflowDify 一、 Docker快速部署1.F2进入bios界面&#xff0c;按F7设置开启VMX虚拟化技术。保存并退出。2.打开控制面板配置开启服务3.到官网下载docker安装包&#xff0c;一键安装&#xff08;全部默认勾选&#xff09; 二、 RagFlow快速部署1.确…...

编程日记 2026/3/3 16:12:19

全局上下文网络GCNet：创新架构提升视觉识别性能

摘要&#xff1a;本文介绍了全局上下文网络&#xff08;GCNet&#xff09;&#xff0c;通过深入分析非局部网络&#xff08;NLNet&#xff09;&#xff0c;发现其在重要视觉识别任务中学习的全局上下文与查询位置无关。基于此&#xff0c;提出简化的非局部模块、全局上下文建模…...

编程日记 2026/3/1 5:25:12