投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / Html5 CSS3 / 基于csshake.css实现红包抖动打开特效代码
基于csshake.css实现红包抖动打开特效代码
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-23
    阅读:

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

简要教程

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

使用方法

在页面引入以下zepto.min.js、red.js文件

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

HTML结构

<!-- 红包 -->
<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>