本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • jquery点击抛洒金币掉落动画特效
    时间:2020-01-08 18:45 来源:开源之家 作者:开源之家测试提供 下载:90 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:97.8 KB
    • 运行环境:HTML
    • 下载次数:90 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    jquery点击抛洒金币掉落动画特效

    特效描述:抛洒金币掉落动画 动画特效,jquery抛洒金币,金币掉落,金币动画。 

    代码结构

    1. 引入CSS

    1
    2
    <link href="css/animator.css" rel="stylesheet" />
    <link href="css/animator.css" rel="stylesheet" />

    2. 引入JS

    1
    2
    3
    4
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

    3. HTML代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery金币抽奖效果代码下载</title>
    <style type="text/css">
    .main {
        width: 200px;
        margin: 0 auto;
    }
    .item1 {
        height: 150px;
        position: relative;
        padding: 30px;
        text-align: center;
        -webkit-transition: top 1.2s linear;
        transition: top 1.2s linear;
    }
    .item1 .kodai {
        position: absolute;
        bottom: 0;
        cursor: pointer;
    }
    .item1 .kodai .full {
        display: block;
    }
    .item1 .kodai .empty {
        display: none;
    }
    .item1 .clipped-box {
        display: none;
        position: absolute;
        bottom: 40px;
        left: 80px;
        height: 540px;
        width: 980px;
    }
    .item1 .clipped-box img {
        position: absolute;
        top: auto;
        left: 0;
        bottom: 0;
        -webkit-transition: -webkit-transform 1.4s ease-in, background 0.3s ease-in;
        transition: transform 1.4s ease-in;
    }
    </style>
    </head>
    <body style="padding:100px 0 0 0;">
    <div class="main">
        <div class="item1">
            <div class="kodai">
                <img src="images/kd2.png" class="full" />
                <img src="images/kd1.png" class="empty" />
            </div>
            <div class="clipped-box"></div>
        </div>
        <p id="html"></p>
    </div>
    </div>
    </body>
    </html>

    jquery点击抛洒金币掉落动画特效

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信