[分享]css做的拆红包特效

拆红包是一种传统的中国文化，让人们感受到节日的欢乐和热闹。而在现代社会，拆红包也常常出现在移动互联网应用上。今天我们来介绍一下用CSS制作拆红包特效。/ 红包包裹 / .wrap { width: 3...

拆红包是一种传统的中国文化，让人们感受到节日的欢乐和热闹。而在现代社会，拆红包也常常出现在移动互联网应用上。今天我们来介绍一下用CSS制作拆红包特效。

/* 红包包裹 */
.wrap {
    width: 300px;
    height: 240px;
    background-image: url('red-envelope.png');
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 红包 */
.envelope {
    width: 120px;
    height: 120px;
    background-image: url('envelope.png');
    background-size: 100% 100%;
    position: absolute;
    transition: all 0.5s;
}

/* 鼠标悬停后改变位置 */
.envelope:hover {
    transform: translateY(-30px);
}

/* 开红包 */
.envelope.open {
    animation: open-envelope 1s steps(20) forwards;
}

/* 红包打开动画 */
@keyframes open-envelope {
    from {
        background-position-x: 0%;
    }
    to {
        background-position-x: -2000%;
    }
}

/* 红包内部 */
.inner {
    width: 100%;
    height: 100%;
    background-image: url('inner.png');
    background-size: 100% 100%;
    display: none;
}

/* 红包打开后显示内部 */
.envelope.open .inner {
    display: block;
} 

在CSS中，我们首先创建了一个红包包裹（.wrap）和一个红包（.envelope）。红包拆开后，里面会显示一个内部（.inner）。我们在红包上设置了鼠标悬停的效果，让红包在鼠标悬停时上移，提高交互体验。

当用户点击红包时，我们给红包添加一个类名“open”，并给这个类设置一个动画效果。在动画中，我们通过改变背景图片的位置来实现红包打开的效果。打开后，内部就会显示出来。这样，我们就完成了一个简单的拆红包特效。