javascript - Please help me with the animation of opening red envelopes on WeChat! !

How to implement the animation of opening red envelopes on WeChat using CSS3? Other solutions are also possible. Do you have any examples? Begging naked in the snow at minus 30 degrees!

Reply content:

How to implement the animation of opening red envelopes on WeChat using CSS3? Other solutions are also possible. Do you have any examples? Begging naked in the snow at minus 30 degrees!

Oh no, I always thought it was a picture replacement. Static picture - "Click -" Animation of opening red envelopes -" Still picture, I always thought it was like this

The poster can refer to this http://www.migong.org/1095
http://xunli.xyz/2016/04/02/react-redpack-animation/
There is a demo https on Github ://github.com/lionrock/HTML5-Example
Hope it can help the original poster

Thanks for the invitation. Can you try this and see if it works

<code></style>
.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);
}
</style>

<div class='redpack'>
  <!--  红包的顶部盖子 -->
  <div class="topcontent"></div>
  <!-- 拆红包的按钮 -->
  <div id="redpack-open"></div>
</div></code>