使用CSS3实现下红包雨的特效

实现红包雨的特效主要涉及到HTML、CSS以及JavaScript。以下是一个简单的红包雨特效的实现步骤：

1. HTML结构

首先，我们需要创建一些红包的HTML元素。

<div id="redPacketRain">
    <!-- 红包元素将通过JavaScript动态添加 -->
</div>

2. CSS样式

接着，我们为红包添加样式。

#redPacketRain {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.red-packet {
    position: absolute;
    width: 60px;
    height: 80px;
    background-color: red;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    animation: fall linear infinite;
    opacity: 0;
}

@keyframes fall {
    0% { transform: translateY(-100vh); opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

3. JavaScript动态添加红包并设置动画

最后，我们使用JavaScript来动态添加红包，并设置它们的初始位置。

const redPacketRain = document.getElementById('redPacketRain');
const numPackets = 50; // 红包数量，可以根据需要调整

function createRedPacket() {
    const redPacket = document.createElement('div');
    redPacket.classList.add('red-packet');
    redPacket.style.left = `${Math.random() * (window.innerWidth - 60)}px`; // 随机设置红包的初始水平位置
    redPacket.style.animationDuration = `${Math.random() * 4 + 2}s`; // 随机设置动画持续时间，使红包下落速度有所不同
    redPacketRain.appendChild(redPacket);
    setTimeout(() => {
        redPacket.remove(); // 红包落出屏幕后移除元素，优化性能
    }, 5000); // 设置一个稍大于最大动画持续时间的延迟，确保红包已被移除
}

// 创建指定数量的红包
for (let i = 0; i < numPackets; i++) {
    setTimeout(() => {
        createRedPacket();
    }, Math.random() * 2000); // 随机延迟，使红包不是同时开始下落
}

这段代码会创建一个红包雨的特效，红包会从屏幕顶部随机位置下落，并且每个红包的下落速度也有所不同。你可以根据需要调整红包的数量、大小、颜色等样式属性，以及动画的持续时间和延迟等参数。