Application of react plus CSS3 to realize the animation effect of WeChat-split red Envelopes (code)

This article mainly introduces the use of react plus CSS3 implementation of the red Envelope animation effect Example (code), with a certain reference value, interested in small partners can refer to.

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>