写一个模拟微信拆红包摇晃的动画效果

要模拟微信拆红包摇晃的动画效果，你可以使用HTML、CSS和JavaScript。以下是一个简单的示例，展示了如何实现这种效果：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信拆红包摇晃动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="red-packet" id="redPacket">
        <div class="front">红包</div>
        <div class="back">拆开有奖</div>
    </div>
    <button onclick="shake()">拆红包</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f5f5f5;
}

.red-packet {
    position: relative;
    width: 150px;
    height: 200px;
    background-color: red;
    border-radius: 15px;
    transform-style: preserve-3d;
    transition: transform 0.3s;
    transform: rotateY(0deg);
}

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
}

.back {
    transform: rotateY(180deg);
}

JavaScript (script.js)

function shake() {
    const redPacket = document.getElementById('redPacket');
    let shakeCount = 0;
    const shakeMaxCount = 6; // 设置摇晃次数
    const shakeInterval = 100; // 设置摇晃间隔，单位为毫秒
    const shakeAngle = 10; // 设置摇晃角度，单位为度

    const shakeIntervalId = setInterval(() => {
        shakeCount++;
        const angle = Math.random() > 0.5 ? shakeAngle : -shakeAngle;
        redPacket.style.transform = `rotateY(${angle}deg)`;
        if (shakeCount >= shakeMaxCount) {
            clearInterval(shakeIntervalId);
            // 红包摇晃结束后，展示背面内容，模拟拆开效果
            setTimeout(() => {
                redPacket.style.transform = `rotateY(180deg)`;
            }, shakeInterval);
        }
    }, shakeInterval);
}

这个示例中，HTML部分创建了一个红包元素和一个拆红包按钮。CSS部分定义了红包的样式，包括前后两面的内容。JavaScript部分实现了拆红包时的摇晃动画效果，通过定时器模拟连续摇晃，并在摇晃结束后展示红包的背面内容。

posted @ 2024-12-22 09:27  王铁柱6  阅读(116)  评论(0)    收藏  举报