Heim > Backend-Entwicklung > PHP-Tutorial > javascript - 求助,关于微信拆红包的动画需求!!

javascript - 求助,关于微信拆红包的动画需求!!

WBOY
Freigeben: 2016-07-06 13:53:23
Original
1125 Leute haben es durchsucht

微信拆红包的动画用css3怎么实现呢?其他方案也行,有例子吗?零下30度雪地裸身跪求!

回复内容:

微信拆红包的动画用css3怎么实现呢?其他方案也行,有例子吗?零下30度雪地裸身跪求!

我擦,我一直以为是图片替换呢,静态图-》点击-》动画拆红包-》再静态图,我一直以为是这样的

楼主可以参考一下这个 http://www.migong.org/1095
http://xunli.xyz/2016/04/02/react-redpack-animation/
Github上面有demo https://github.com/lionrock/HTML5-Example
希望可以帮到楼主

谢谢邀请。你试试看这个行不行

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


<div class="redpack">
  <!--  红包的顶部盖子 -->
  <div class="topcontent"></div>
  <!-- 拆红包的按钮 -->
  <div id="redpack-open"></div>
</div></code>
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage