【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>