微信抢红包拆红包界面h5模仿

微信抢红包拆红包界面h5模仿

今天我们来模仿一下微信抢红包页面的交互效果

我们准备了素材，可以在bfweditor公共资源库中搜索红包就可以看到

ok，我们先进行布局

html代码如下

  <div class="redbag-cont">
        <div class="redbag-bg">
            <div class="redbag-close">
                <img src="http://repo.bfw.wiki/bfwrepo/icon/5de0a63fc7188.png" alt="" />
            </div>
            <div class="redbag-avatar">
                <img src="http://repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90" />
            </div>
            <div class="redbag-nickname">
                wanbgo
            </div>
            <div class="redbag-msg">
                大吉大利，今晚吃鸡
            </div>
            <div class="redbag-open">
                <div class="flipper">
                    <div class="front">
                        <p>
                            <img src='http://repo.bfw.wiki/bfwrepo/icon/5de0a66244fd7.png' />
                        </p>
                    </div>
                    <div class="back">
                        <p>
                            <img src='http://repo.bfw.wiki/bfwrepo/icon/5de0a66244fd7.png' />
                        </p>
                    </div>

                </div>
...

点击查看剩余70%