基于csshake.css实现红包抖动打开特效代码

基于csshake.css实现红包抖动打开特效代码

这是一款基于csshake.css红包抖动打开特效,点击红包正中间的图片,红包不停摇晃之后打开查看中奖信息;注:手机端自适应不是很完美。

使用方法
在页面引入以下zepto.min.js、red.js文件

1
2
<script src="js/zepto.min.js"></script>
<script src="js/red.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 红包 -->
<div class="red"><!-- shake-chunk -->
    <img id="bac_img" src="img/red-w.png" />
    <button class="redbutton" style="font-size:5vw;"></button>
    <div class="red-jg">
        <h1>恭喜您获得以下奖励</h1>
        <h4>1.获得0.2元现金红包</h4>
        <h4>2.大头网5元现金优惠券</h4>
        <h4>3.其他活动</h4>
        <img src="img/datouwang.png" style="width:15vw;height:15vw; border-radius:0; position:absolute; top:20vw; left:37%;" />
    </div>
</div>

文件信息:

    4

    发表评论