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..........完整代码请登录后点击上方下载按钮下载查看