

萌趣蜡烛

码途钥匙

2025-09-09

· 点击蓝字，关注我们

效果图

一、HTML

HTML 就像搭建积木的图纸，负责把蜡烛的各个部分 “摆” 到页面上。它先定义好要有两根蜡烛的身体、烛芯、眼睛、嘴巴，还要安排好烛火、烟雾、地面这些元素的位置。没有 HTML，页面就是一片空白，蜡烛连最基本的 “骨架” 都没有 —— 简单说，它的任务是告诉浏览器：“这里该放蜡烛，那里该放烛火”。

二、CSS

CSS 是蜡烛的 “造型师” 和 “动作指导”。它先给蜡烛上色：白色的烛身、深色的烛芯和眼睛，再把烛火涂成暖橙色；接着通过 “动画指令” 让蜡烛活起来 —— 左边蜡烛眨眼、鼓肚子、吐烟雾，右边蜡烛摇晃身体、烛火跳动，甚至让背景随烛火明暗切换。没有 CSS，蜡烛就是静止的 “白板模型”，更不会有生动的表情和动作。

三、JS

这个蜡烛动画的核心动态效果靠 CSS 就能实现，而 JS 则是 “潜力股”—— 如果想让蜡烛更有趣，比如点击蜡烛时才喷火、根据鼠标位置调整蜡烛方向，就需要 JS 来 “传递指令”。它能接收用户的操作，告诉 CSS “该触发哪个动画”，让静态效果升级成互动体验。

四、代码

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>两只蜡烛的创意动画</title>    <style>      body {        background-color: #fff;        animation: change-background 3s infinite linear;      }      .wrapper {        position: absolute;        left: 50%;        top: 70%;        transform: scale(1.5, 1.5) translate(-50%, -50%);      }      .floor {        position: absolute;        left: 50%;        top: 50%;        width: 350px;        height: 5px;        background: #673c63;        transform: translate(-50%, -50%);        box-shadow: 0px 2px 5px #111;        z-index: 2;      }