jquery实现老虎机抽奖效果代码

代码语言:html

所属分类:其他

代码描述:jquery实现老虎机抽奖效果代码

代码标签: 抽奖 效果

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">

    <meta charset="UTF-8">
    <style>
        * {
      margin: 0;
      padding: 0;
    }
    img {
      vertical-align: bottom;
    }
    .game-header {
      width: 100%;
    }
    .game-header img {
      width: 100%;
    }
    .game-content {
      position: relative;
      width: 100%;
    }
    .game-content img {
      width: 100%;
    }
    .game-goods-wrap {
      position: absolute;
      margin: 0 auto;
      top: 12%;
      left: 0;
      right: 0;
      bottom: 0;
      width: 64%;
      height: 50%;
      border-top-left-radius: 0.1875rem;
      border-top-right-radius: 0.1875rem;
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      overflow: hidden;
    }
    .game-goods-wrap:before {
      position: absolute;
      top: -1PX;
      right: 0;
      bottom: 1PX;
      left: -1PX;
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
      width: 101%;
      height: 100%;
      content: "";
      box-shadow: 0 1.25rem 1.25rem -1.25rem #000 inset;
      z-index: 12;
    }
    .game-goods-wrap:after {
      position: absolute;
      top: 1PX;
      right: 0;
      bottom: -1PX;
      left: -1PX;
      width: 101%;
      height: 100%;
      box-shadow: 0 -1.25rem 1.25rem -1.25rem #000 inset;
      z-index: 12;
      content: "";
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
    }
    .game-goods-list {
      height: 100%;
      overflow: hidden;
    }
    .game-goods {
      position: absolute;
      width: 32%;
      height: 100%;
      z-index: 10;
      overflow: hidden;
    }
    .game-goods:first-child {
      left: -32%;
      transform: translateX(100%);
      -ms-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      -o-transform: translateX(100%);
    }
    .game-goods:nth-child(2) {
      left: 50%;
      transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -o-transform: translateX(-50%);
    }
    .game-goods:last-child {
      left: 100%;
      transform: translateX(-100%.........完整代码请登录后点击上方下载按钮下载查看

网友评论0