纯CSS3动画：打火机点燃效果实现

"纯CSS3实现打火机动画效果示例" 在本示例中，我们将探讨如何使用CSS3创建一个逼真的打火机动画效果。这个效果包括火焰的上升和打火机主体的渐变色彩，全部通过CSS3的动画属性来实现，无需JavaScript或其他编程语言。 首先，我们看到HTML结构非常简洁，只有一个类名为`.playground`的div，它包含了打火机的两个主要部分：`.flame`表示火焰，`.lighterBody`代表打火机的主体。 1. **火焰（.flame）**： - `position: absolute;` 使火焰元素相对于其最近的非静态定位祖先元素定位。 - `bottom: 60%; left: 42%;` 定义火焰在容器中的位置。 - `width: 14px; height: 70px;` 设置火焰的初始尺寸。 - `background-color: white;` 作为火焰的基本颜色。 - `border-radius: 100% 100% 0 0;` 创建圆形到矩形的过渡，模拟火焰形状。 - `box-shadow` 属性用来创建火焰的层次感，每个阴影表示火焰的不同温度区域，通过不同的颜色和偏移量来表现。 - `animation: flame 3s infinite linear;` 定义一个名为`flame`的动画，持续时间为3秒，无限循环，并以线性方式播放。 动画定义如下： ```css @keyframes flame { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } } ``` 这个关键帧动画使得火焰在垂直方向上移动，模拟火焰上升和下降的效果。 2. **打火机主体（.lighterBody）**： - `position: absolute;` 与火焰类似，使其相对定位。 - `width: 140px; height: 130px;` 设置打火机主体的尺寸。 - `top: 200px; left: 0;` 定位打火机在容器中的位置。 - `background: linear-gradient(to right, ...);` 创建从左至右的渐变背景，模拟打火机的金属质感。 - `border-radius: 2% 2% 8% 8%;` 为打火机主体添加圆角，模拟真实打火机的形状。 - `box-shadow: inset 0 0 5px 5px #333333;` 内阴影效果，增加立体感。 3. **打火机主体的细节（.lighterBody:before）**： - `width: 47px; height: 47px;` 定义打火机头部的大小。 - `top: -50px; left: 42px;` 将打火机头部置于适当位置。 - `border-radius: 6% 6% 0 0;` 创建类似打火机头部的形状。 - `background: linear-gradient(to right, ...);` 使用渐变背景模拟打火机头部的色彩变化。 这个纯CSS3实现的打火机动画效果，展示了CSS3的强大能力，通过简单的HTML结构和CSS规则就能创建出具有交互感的动态视觉元素。开发者可以在此基础上进行修改，例如调整颜色、动画速度或添加更多细节，以适应不同的设计需求。