[ Written in the front ] After receiving a penny of WeChat red envelopes last time, I was thinking about how to realize the effect of opening and flipping the red envelopes. One of the biggest milestones brought by WeChat is the development of the red envelope function. Someone must pick it up, but if you grab a penny in the WeChat group, you have to say thank you boss, or even say thank you dad. So today I will explain to you how to achieve the WeChat red envelope flip effect.

[ Involved knowledge points ]: CSS animation realizes the red envelope flip effect, how CSS realizes the WeChat red envelope effect, how to realize the red envelope opening effect, how to realize the WeChat red envelope page effect, animation animation realizes the red envelope opening effect.

[ Realization effect ] The download link of the complete code package is attached at the end of the article:
insert image description here

1. Implementation process
2. Source code sharing

1. Implementation process

Copyright Statement: Originally published in CSDN Blogger - Learn Codes for the Blind with a Cane , If you have any doubts, please leave a message and send a private message!

1.1 Set the basic mask

This is mainly to set a dom node first, and then set the background as a transparent mask for the dom node. The specific settings are as follows:

background: rgba(0, 0, 0, 0.5);

Then set the width and height to 100%, and you can get the following page:
insert image description here

1.2 Set the red envelope effect

A. Create the basis of red envelopes

Based on the above background, create a new container under the dom node to store the red envelope elements, mainly set the background color and border. We set a square with a red background color, as shown below:

insert image description here

B. Set the middle arc shadow

This is for the red envelope effect. We can set a node with a width of 200% in the red dom node, then set the border attribute to 50%, and set it to another red to form a contrast. As follows:
insert image description here

1.3 Add "on" flip effect

A. Create an "on" node

The dom here is juxtaposed with the light red node above. I set the relative absolute layout, and set the width, height and offset. What it boils down to is setting a circle with a yellow background color and styling it like this:

.redmid {
    
    
      position: relative;
      top: -80px;
      width: 180px;
      height: 180px;
      margin: auto;
      border-radius: 50%;
      background: #ebcc9d;
      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
    }

The effect after setting is as follows:
insert image description here

At this point we have a complete start interface, and the next step is the animation effect.

B. Set flip effect (after clicking)

At this time, I mainly used the click event onclick and the animation animation attribute of CSS3 and the animation-iteration-count animation execution times attribute.
The core implementation is: after the click event, add animation style attributes to the dom node through js.

.redmid.open-anim {
    
    
      animation: 3s open;
      animation-iteration-count: 2;
}

After adding it, it looks like this:
insert image description here
Copyright statement: Originally published by CSDN blogger - Zhuzhang Blind Learning Soft Voice Code , if you have any doubts, you can leave a message and send a private message!

1.4 Amount display

In fact, we only need to add an amount content display in the same-level directory of the golden button, but we need to set a display time, that is, display after the animation (3s) ends, so I set a 3-second delay display after clicking (setTimeout )
code is as follows:

setTimeout(function () {
    
    
      $(".redmid").hide();
      $(".showMon").show(500);
    }, 3000)

The final text effect is as follows:
insert image description here
See the following chapters for complete code sharing.

2. Source code sharing

Looking forward to your support

I hope the demo I wrote can inspire you. If you think the blogger’s stuff is helpful to you, I look forward to your support and understanding. It’s not easy to create without deception. Welcome to the list! ! ! Click here for the entrance of Huangbang
insert image description here

Baidu network disk sharing

Link: https://pan.baidu.com/s/1983bkUY8cClm3QblxpmNvA
Extraction code: hdd6

123 cloud disk sharing (download unlimited speed)

Link: https://www.123pan.com/s/ZxkUVv-55J4.html
Extraction code: hdd6

I look forward to making progress together, with you and me, let’s work hard in 2023! ! !

[Realize WeChat red envelope effect] Front-end CSS realizes WeChat red envelope opening effect (with source code download)

Table of contents