---
title: 🔥 火焰 - 用 CSS 刻畫出生動的火焰
tags: CSS, 特效
date: 2021/7/28
---

###### tags: `CSS` `特效`

###### *date: 2021/7/28*

# 🔥 火焰 - 用 CSS 刻畫出生動的火焰


> 此特效參考了 [Red Stapler](https://www.youtube.com/watch?v=_2miX4rxkJs) 的影片，並附加另一種做法
> [name=Red Stapler]

[TOC]

## 🔥 跟著我一起玩火去

### 先按照 Red Stapler 的做法理解一遍

1. 我們先在 HTML 做一個火焰的容器

    <div class="flame-wrapper">
        <div class="flame red"></div>
        <div class="flame orange"></div>
        <div class="flame gold"></div>
        <div class="flame white"></div>
    </div>

2. 接著我們來製作 CSS，先把火焰的容器置中在畫面中央，背景用黑色，比較好展示

    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #000;
    }

3. 接著把各自的火焰顏色設定好。

    .red {
        width: 80px;
        height: 80px;
        background: orangered;
        box-shadow: 0 0 10px 5px orangered;
    }
    .orange {
        width: 60px;
        height: 60px;
        background: orange;
        box-shadow: 0 0 12px 6px orange;
    }
    .gold {
        width: 45px;
        height: 45px;
        background: gold;
        box-shadow: 0 0 9px 4px gold;
    }
    .white {
        width: 35px;
        height: 35px;
        background: lightyellow;
        box-shadow: 0 0 9px 4px lightyellow;
    }

*這時畫面是這樣*

4. 接者把所有顏色重疊並旋轉修整形狀

    .flame-wrapper {
        position: relative;
        z-index: 100;
     }
     
    .flame {
        position: absolute;
        left: 50%;
        bottom: 0;
        border-radius: 50% 0 50% 50%;
        transform: translate(-50%) rotate(-45deg);
    }

*這時畫面呈現這樣*

5. 接著我們增添動畫，讓火焰栩栩如生

    @keyframes flicker {
        0% {transform: rotate( -1deg );}
        20% {transform: rotate( 2deg ) scaleY( 1.05 );}
        40% {transform: rotate( -1deg );}
        60% {transform: rotate( 1deg );}
        80% {transform: rotate( -1deg ) scaleY( 0.9 );}
        100% {transform: rotate( 1deg );}
    }
    
    .flame-wrapper_1 {
        position: relative;
        top: -120px;
        
        <!-- 多加這行套用動畫效果 -->
        animation: flicker 5ms ease-in infinite;
        z-index: 100;
     }


### 學習完製作方式後，嘗試用 box-shadow 讓容器簡化到只有一個

1. 一樣先做火焰的容器

    <div class="flame-wrapper">
      <div class="flame fire"></div>
    </div>

2. 接著刻畫 fire 的 CSS

    .fire {
        width: 80px;
        height: 80px;
        box-shadow: 4px -4px 8px 6px orangered,
          inset -6px 6px 6px 6px orangered,
          inset -12px 12px 6px 12px orange,
          inset -14px 14px 6px 20px gold,
          inset 0px 0px 0px 40px lightyellow;
    }

3. 其他步驟都一樣，就完成了


#### 大家更喜歡哪個呢? 歡迎留言並說出你的看法

我個人都蠻喜歡的

1. 
第一個比較好調整，容器分工明確

2. 
第二個只有單一個容器，頁面結構比較簡單

#### source : [Codepen](https://codepen.io/vsfvjiuv-the-typescripter/pen/rNmvwaR)