React and CSS3 implement WeChat to remove red envelopes animation

This time to bring you react and CSS3 to achieve the removal of red envelopes animation, react and CSS3 implementation of the notice of the red envelope animation, the following is the actual case, together to see.

Red envelopes have detonated a series of marketing craze, I believe we are not unfamiliar with this form of red envelopes, here in the spirit of entertainment first with react simple implementation of the animation effect of the removal of red envelopes, for everyone to exchange learning

Draw Red envelopes with CSS3

. redpack {  height:450px;  Background: #A5423A;  width:300px;  left:0;  top:0;  border-radius:10px;  margin:0 Auto;}. topcontent {    height:300px;    border:1px solid #BD503A;    Background-color: #BD503A;    border-radius:10px 10px 50% 50%/10px 10px 15% 15%;    box-shadow:0px 4px 0px-1px Rgba (0,0,0,0.2);} #redpack-open {    width:100px;    height:100px;    border:1px solid #FFA73A;    Background-color: #FFA73A;    border-radius:50%;    Color: #fff;    font-size:20px;    Display:inline-block;    Margin-top: -50px;    box-shadow:0px 4px 0px 0px rgba (0, 0, 0, 0.2);}

<p class= ' redpack ' >  <!--  top cover of red envelopes--  <p class= "topcontent" ></p>  <!-- button to split red envelopes--  <p id= "Redpack-open" ></p></p>

Effect

Use react to differentiate the transitions of different states

Use React.js to achieve, mainly by judging state to control the red envelope is now waiting to be opened or has been opened, the specific code is as follows

Import React from ' React '; class Readpacket extends React.component {constructor (props) {super (props);    This.state = {Animation:false, status:0//0: Waiting to be disassembled 1: after disassembly};        } render () {var bonus = this.props.thanks? 0:parsefloat (This.props.surveyInfo.bonus); if (This.state.status = = 0) {return (<p classname= ' redpack-container ' id= ' Redpack-container '                            > <p classname= ' redpack ' > <p classname= ' topcontent ' >                                <p id= ' redpack-opened ' > <p classname= ' Redpack-avatar ' >                               </p> </p> 

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS background-attachment use of the detailed

Bootstrap Realization Price List

How CSS handles the browser's default style