html css 制作孔明灯

### 使用 HTML 和 CSS 实现孔明灯特效

#### 1. 基本结构设置
为了创建一个简单的孔明灯动画效果，首先需要定义基本的HTML结构。此部分主要由容器和代表孔明灯的主要元素组成。

<div class="sky">
    <div class="lantern"></div>
</div>

上述代码片段中`<div>`标签用于构建页面布局的基础框架[^1]。

#### 2. 定义样式与动画属性
接下来通过CSS来赋予这些元素具体的外观以及动态行为：

.sky {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to bottom, #3a7bd5, #e8def8);
}

.lantern {
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 150px;
    border-radius: 50% / 40%;
    background-color: rgba(255, 99, 71, .8); /* 设置颜色 */
    box-shadow: inset 0 0 20px rgba(255, 99, 71, .8), 0 0 20px rgba(255, 99, 71, .8);

    animation-name: rise;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

这里设置了天空背景的颜色渐变，并且给孔明灯应用了一个名为 `rise` 的上升动画。

#### 3. 创建动画关键帧
最后一步是编写让孔明灯缓缓升空的关键帧动画规则：

@keyframes rise {
    from {bottom: -10%; opacity: 0;}
    to {bottom: 100%; opacity: 1;}
}

这段代码描述了孔明灯从屏幕底部逐渐升起直至消失的过程，在整个过程中透明度也会相应变化以模拟真实感。

以上就是利用HTML和CSS简单实现孔明灯飘浮效果的方式之一。当然还可以进一步优化和完善细节，比如加入更多装饰性的图形或者调整参数使运动更加自然流畅。