有趣的蜡烛吹灭动画的HTML+CSS源代码

今天我们来聊一个非常有趣的前端动效：用 HTML+CSS 实现一个蜡烛吹灭的动画效果。这个动画效果不仅仅是视觉上的小花样，还展示了如何利用纯 CSS 实现复杂的交互效果，既不依赖 JavaScript，也不需要额外的库，纯纯就是 CSS 的魔法。

这个动画效果看似简单，但实际上它包含了多个部分的协同运作，比如蜡烛的身体、眼睛、火焰的跳动、烟雾的飘散等。那么，我们就一起来看看这段代码是怎么实现这个效果的吧！

1. 页面结构

首先，我们来看一下 HTML 的结构。整个页面的结构很简单，基本上就是一个包含两个蜡烛的 div 容器。为了方便管理和控制每个蜡烛的动画效果，蜡烛的每个部分都被细分成了多个 div 元素。

    
复制
    
<div class="wrapper">
    <div class="candles">
        <div class="light_wave"></div>

        <div class="candle1">
            <div class="candle1_body">
                <div class="candle1_eyes">
                    <span class="candle1_eyes-left"></span>
                    <span class="candle1_eyes-right"></span>
                </div>
                <div class="candle1_mouth"></div>
            </div>
            <div class="candle1_stick"></div>
        </div>

        <div class="candle2">
            <div class="candle2_body">
                <div class="candle2_eyes">
                    <span class="candle2_eyes-left"></span>
                    <span class="candle2_eyes-right"></span>
                </div>
            </div>
            <div class="candle2_stick"></div>
        </div>

        <div class="candle2_fire"></div>
        <div class="candle_smoke1"></div>
        <div class="candle_smoke2"></div>
    </div>

    <div class="floor"></div>
</div>

    

这里有两个主要的蜡烛元素：candle1 和 candle2。candle1 还有嘴巴和眼睛的细节，而 candle2 则稍微简单一些，仅有眼睛。这个简单的结构通过不同的 div 元素实现了蜡烛的不同部分：蜡烛的身体、火焰、烟雾等等。

二、蜡烛身体的设计

蜡烛的身体是整个动画的基础部分，使用简单的 div 元素配合 CSS 样式来实现。我们通过设置 width、height 以及 background 来定义蜡烛的形状和颜色，并使用 border-radius 来圆润蜡烛的顶部。

    
复制
    
.candle1 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 35px;
    height: 100px;
    background: #fff;
    border: 3px solid #673C63;
    border-bottom: 0px;
    border-radius: 3px;
    transform-origin: center right;
    transform: translate(60%, -25%);
    box-shadow: -2px 0px 0px #95c6f2 inset;
    animation: expand-body 3s infinite linear;
}

    

在这个代码片段中，我们定义了第一支蜡烛的外观。蜡烛的身体（candle1）被放置在屏幕的中心位置，并通过 transform 和 translate 来微调其位置。同时，通过 box-shadow 给蜡烛添加了内阴影效果，使得蜡烛看起来更加立体。

三、火焰的实现

蜡烛火焰是这个动画的亮点之一。火焰的形状通过一个带有椭圆边框的 div 来实现，背景颜色则选择了橙色到黄色的渐变色，以模拟真实的火焰效果。火焰的跳动效果使用 @keyframes 动画来实现。

    
复制
    
.candle2_fire {
    position: absolute;
    top: 50%;
    left: 40%;
    display: block;
    width: 16px;
    height: 20px;
    background-color: red;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: #ff9800;
    transform: translate(-50%, -50%);
    animation: dance-fire 3s infinite linear;
}

    

这个代码片段中，火焰的形状通过 border-radius 来定义，并通过 background 设置了火焰的颜色。animation 属性应用了一个名为 dance-fire 的关键帧动画，使火焰在页面加载时自动进行跳动。

关键帧动画的定义如下：

    
复制
    
@keyframes dance-fire {
    59%,
    89% {
        left: 40%;
        width: 0px;
        height: 0px;
    }
    90%,
    0%,
    7%,
    15%,
    23%,
    31%,
    39%,
    47%,
    55% {
        left: 40.8%;
        width: 16px;
        height: 20px;
        background: #FFC107;
    }
    94%,
    3%,
    11%,
    19%,
    27%,
    35%,
    43%,
    51%,
    58% {
        left: 41.2%;
        width: 16px;
        height: 20px;
        background: #FF9800;
    }
}

    

四、眼睛的眨动

为了使蜡烛看起来更加生动，我们为蜡烛添加了眼睛，并且眼睛会定期眨动。这个效果同样是通过 @keyframes 动画来实现的。

    
复制
    
.candle1_eyes-left, .candle1_eyes-right {
    position: absolute;
    left: 30%;
    top: 20%;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: #673C63;
    transform: translate(-70%, 0%);
    animation: blink-eyes 3s infinite linear;
}

    

这里定义了眼睛的样式和位置，关键帧动画 blink-eyes 则控制眼睛的眨动效果：

    
复制
    
@keyframes blink-eyes {
    0%, 35% {
        opacity: 1;
        transform: translate(-70%, 0%);
    }
    36%, 39% {
        opacity: 0;
        transform: translate(-70%, 0%);
    }
    40% {
        opacity: 1;
        transform: translate(-70%, 0%);
    }
    50%, 65% {
        transform: translate(-140%, 0%);
    }
    66% {
        transform: translate(-70%, 0%);
    }
}

    

在这个动画中，眼睛会在不同时刻淡出和淡入，从而模拟出眨眼的效果。

五、烟雾的飘动

蜡烛熄灭后烟雾的飘动是整个动画的点睛之笔。我们通过两个小的 div 来表示烟雾，并使用 @keyframes 动画来控制它们的移动和消失。

    
复制
    
.candle_smoke1 {
    position: absolute;
    left: 30%;
    top: 50%;
    width: 30px;
    height: 3px;
    background: grey;
    transform: translate(-50%, -50%);
    animation: move-left 3s infinite linear;
}

.candle_smoke2 {
    position: absolute;
    left: 30%;
    top: 40%;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: grey;
    transform: translate(-50%, -50%);
    animation: move-top 3s infinite linear;
}

    

两个烟雾块分别定义了大小和位置，并应用了不同的动画效果：

    
复制
    
@keyframes move-left {
    0%, 59%, 100% {
        width: 0px;
        left: 40%;
    }
    60% {
        width: 30px;
        left: 30%;
    }
    68% {
        width: 0px;
        left: 20%;
    }
}

@keyframes move-top {
    0%, 64%, 100% {
        width: 0px;
        height: 0px;
        top: 0%;
    }
    65% {
        width: 10px;
        height: 10px;
        top: 40%;
        left: 40%;
    }
    80% {
        width: 0px;
        height: 0px;
        top: 20%;
    }
}

    

这两个动画分别控制了烟雾的水平和垂直移动，使得烟雾在蜡烛熄灭后逐渐消散。

六、背景颜色的变化

为了让动画更加逼真，我们还需要实现背景颜色的变化，当背景颜色从白色变为黑色时，蜡烛逐渐熄灭。我们使用 @keyframes 来控制背景颜色的变化：

    
复制
    
body {
    background-color: #FFF;
    animation: change-background 3s infinite linear;
}

@keyframes change-background {
    0%, 59%, 98%, 100% {
        background: #fff;
    }
    61%, 97% {
        background: #000;
    }
}

    

通过这个动画，页面的背景颜色会在一定时间内从白色渐变为黑色，再从黑色渐变回白色，形成循环。

结语

通过 HTML 和 CSS，我们成功地实现了一个有趣的蜡烛吹灭动画效果。这个项目展示了如何使用简单的 CSS 属性和动画来创建复杂的效果，整个过程不需要任何 JavaScript，完全依赖于 CSS 的强大功能。

这个蜡烛动画展示了 CSS 在动画制作上的潜力，如果你有兴趣，不妨试着将这个项目做一些修改，比如增加更多的蜡烛、改变火焰的颜色，甚至可以尝试为蜡烛加上一些音效。

×

直达下载

反爬虫抓取，人机验证，请输入验证码查看内容

验证码：提交查看

请扫描上方公众号二维码，发送关键字：2024，获取验证码。

微信搜索公众号:“web前端专栏”或者“javascript200” 或微信扫描右侧二维码关注微信公众号