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

WBOY
Release: 2016-07-06 13:53:23
Original
1115 people have browsed it

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>
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template