微信抢红包拆红包界面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> </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
网友评论0