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