css+js实现摇金币抽奖动画效果代码-html代码-BFW代码库

css+js实现摇金币抽奖动画效果代码

代码语言：html

所属分类：动画

代码描述：css+js实现摇金币抽奖动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="Pragma" content="no-cache" />

    <meta http-equiv="Cache-Control" content="no-cache" />

    <meta http-equiv="Expires" content="0" />

    <title></title>

    <style type="text/css">

        .main {

            width: 980px;

            margin: 0 auto;

        }



        .item1 {

            height: 540px;

            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>

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animator.css">

</head>

<body>

    <div class="main">

        <div class="item1">

            <div class="kodai">

                <img src="//repo.bfw.wiki/bfwrepo/image/6102aebdde39f.png" class="full" />

                <img src="//repo.bfw.wiki/bfwrepo/image/6102af8d6f3cd.png" class="empty" />

            </div>

            <div class="clipped-box">



            </div>

        </div>

        <p id="html"></p>

    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <script>
        $(document).ready(function () {
            (genClips = function () {
                $t = $('.item1');
                var amount = 5;
                var width = $t.width() / amount;
                var height = $t.height() / amount;
                var totalSquares = Math.pow(amount, 2);
                var y = 0;
                var index = 1;
                for (var z = 0; z <= (amount * width); z = z + width) {
                    $('<img class="clipped" src="//repo.bfw.wiki/bfwrepo/images/huodong/jb' + index + '.png" />').appendTo($('.item1 .clipped-box'));
                    if (z === (amount * width) - width) {
                        y = y + height;
                        z = -width;
                    }
                    if (index >= 5) {
                        index = 1;
                    }
                    index++;
                    if (y === (amount * height)) {
                        z = 9999999;
                    }
                }
            })();
            function rand(min, max) {
                return Math.floor(Math.random() * (max .........完整代码请登录后点击上方下载按钮下载查看