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

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

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

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

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

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

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>

            </div>


        </div>
    </div>

第二步添加css

<style>
    .redbag-bg {
        margin: 30px auto;
        color: #ffe294;
        text-align: center;

        height: 550px;
        width: 400px;
        background: url('http://repo.bfw.wiki/bfwrepo/icon/5de0a5e2a0a06.png');
        background-size: cover;

    }
    .redbag-close img {
        width: 20px;
    }
    .redbag-close {

        padding: 30px 10px 0 0;
        text-align: right;
    }
    .redbag-avatar {
        margin-top: 60px;
        margin-left: 160px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;

    }
    .redbag-avatar img {
        width: 80px;
        height: 80px;

    }
    .redbag-open {}
    .redbag-open img {
        width: 30%;
    }
    .redbag-msg {
        font-size: 26px;
        padding: 20px;
    }
    .redbag-nickname {
        padding: 10px;
    }
    .redbag-open {
        perspective: 1000px;
    }

    .redbag-open ,.front,.back {
        width: 400px;
        height: 400px;
    }
    .flipper {

        transform-style: preserve-3d;
        position: relative;
    }
    .front,.back {
        position: absolute;
    }
    .back {
        transform: rotateY(180deg);
    }

</style>

ok,这个时候整个布局局面完成了,现在要添加点击开的时候出现的三维旋转效果,这里我们使用perspective-3d

给这个拆字增加这个属性

   .flipper {
        transform-style: preserve-3d;
        position: relative;
    }

定义个动画,实现360度旋转

@-webkit-keyframes rotateopen {
        0% {
            transform: rotateY(0deg);
        }
        50% {
            transform: rotateY(90deg);
        }
        100% {
            transform: rotateY(180deg);
        }
    }

设置动画触发的class

    .redbag-open .rotateopen {
        -webkit-animation: rotateopen 0.6s infinite linear;

    }

最后通过js触发

<script type="text/javascript" charset="utf-8">
    bready(function() {
        $(".redbag-open").click(function() {
            $(this).children('.flipper').addClass("rotateopen");
        });
    });
</script>

ok,完工了

在线预览请点击 http://code.bfw.wiki/code/15750087747129190034.html


{{collectdata}}

网友评论0