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

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

news 来源：原创 2025/5/1 19:31:39

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