css3动画打开红包

CSS3动画能够通过样式改变，实现一些开发想要的特效效果，比如点击打开红包的效果。下面将介绍如何使用CSS3动画打开红包。

html:div class="wrapper">
    div class="envelope">
    div class="envelope-front">
    /div>
    div class="envelope-back">
    /div>
    div class="envelope-inside">
    /div>
    /div>
    /div>
CSS:.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #efefef;
}
.envelope {
    position: relative;
    width: 200px;
    height: 130px;
    transform-style: preserve-3d;
    animation: rotate 2s ease-in-out infinite;
}
.envelope-front,.envelope-back,.envelope-inside {
    width: 200px;
    height: 130px;
    position: absolute;
    top: 0;
    background-color: #ff4d4e;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
}
.envelope-front {
    transform: rotateY(-90deg);
    background-color: #6bc9ff;
}
.envelope-back {
    transform: rotateY(90deg);
    background-color: #ffc05d;
}
.envelope-inside {
    transform: rotateY(0deg);
    background-color: #fff;
    padding: 20px;
    color: #333;
    font-size: 24px;
    box-sizing: border-box;
}
.envelope-inside:before {
    content: '恭喜发财';
    font-size: 30px;
    color: #ff4d4e;
    display: block;
    text-align: center;
    margin-bottom: 20px;
}
@keyframes rotate {
0% {
transform: rotateY(0deg)}
50% {
transform: rotateY(180deg)}
100% {
transform: rotateY(360deg)}
}
.envelope:hover {
    animation-play-state: paused;
    cursor: pointer;
}
.envelope:hover .envelope-front {
    transform: rotateY(-180deg);
}
.envelope:hover .envelope-back {
    transform: rotateY(180deg);
}
.envelope:hover .envelope-inside {
    transform: rotateY(0deg);
}
    

首先，需要创建一个包含红包的容器，并为红包设置三个面（front、back、inside），分别绘制不同的颜色。创建一个旋转动画，在红包上应用动画来产生旋转效果。当鼠标悬停在红包上时，将停止旋转动画，使用hover伪类悬停在红包上时转换每个面的位置和样式以展现“打开红包”的动画效果。

最终显示的效果是，鼠标悬停在红包上时可以展现打开红包的效果，并可以看到祝福语。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！