jquery+sition实现支付手机端移动端左滑右滑切歌带歌词的播放器代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：jquery+sition实现支付手机端移动端左滑右滑切歌带歌词的播放器代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>


    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- 背景css -->
    <style>
        body {
      background-color: #02080f;
    }
    .stars-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: -webkit-radial-gradient(center ellipse, #061a33 0%, #000000 100%);
      background: radial-gradient(ellipse at center, #061a33 0%, #000000 100%);
      background-size: 110%;
      background-position: 100% 100%;
      overflow: hidden;
    }
    .title-wrapper {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
    }
    .title-wrapper .title {
      width: 31vw;
      position: absolute;
      text-align: justify;
      top: 34.2vh;
      left: 45vw;
      right: 15%;
      font-size: 5vw;
      line-height: 1.3;
      font-weight: normal;
      margin: 0;
      color: #fff;
      color: #030f1d;
      opacity: .8;
      text-transform: uppercase;
      letter-spacing: .1em;
    }
    .title-wrapper .title:after {
      content: attr(data-title);
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: -webkit-linear-gradient(325deg, #fcf9ef 0%, rgba(252, 249, 239, 0.7) 30%, rgba(252, 249, 239, 0.01) 100%);
      background: linear-gradient(125deg, #fcf9ef 0%, rgba(252, 249, 239, 0.7) 30%, rgba(252, 249, 239, 0.01) 100%);
      background-repeat: no-repeat;
      background-position: 100% 0;
      background-size: 100%;
      -webkit-background-clip: text;
      overflow: hidden;
      color: transparent;
    }
    .moon-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
    }
    .moon {
      width: 14vw;
      height: 14vw;
      position: absolute;
      top: 33vh;
      left: 24vw;
      border-radius: 50%;
      background: #e7e1df  50% 50% no-repeat;
      background-size: 102%;
      box-shadow: 0px 0px 80px 0px rgba(183, 176, 130, 0.6), 0px 0px 350px 0px rgba(222, 221, 215, 0.3);
    }
    .moon:after {
      content: "";
      display: block;
      position: absolute;
      left: 5%;
      top: 5%;
      width: 90%;
      height: 90%;
      border-radius: 50%;
      background-color: transparent;
      box-shadow: 0px 0px 150px 0px rgba(183, 176, 130, 0.1), 0px 0px 340px 0px rgba(222, 221, 215, 0.1);
      -webkit-filter: blur(10px);
              filter: blur(10px);
    }
    .stars-cluster {
      position: absolute;
      left: 3%;
      right: 3%;
      top: 3%;
      bottom: 3%;
    }
    .stars-cluster.stars-cluster-1 {
      left: 20%;
      right: 25%;
      top: 20%;
      bottom: 40%;
    }
    .stars-cluster.stars-cluster-1 .star-7,
    .stars-cluster.stars-cluster-1 .star-22,
    .stars-cluster.stars-cluster-1 .star-30 {
      -webkit-animation: shooting-star 10s ease-out 1s forwards;
              animation: shooting-star 10s ease-out 1s forwards;
    }
    .stars-cluster.stars-cluster-1 .star-22 {
      -webkit-animation-delay: 4s;
              animation-delay: 4s;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
    }
    .stars-cluster.stars-cluster-1 .star-30 {
      -webkit-animation-delay: 7s;
              animation-delay: 7s;
    }
    .stars-cluster.stars-cluster-1 .star-20 {
      -webkit-animation: shooting-star-2 8s ease-out 5s forwards infinite;
              animation: shooting-star-2 8s ease-out 5s forwards infinite;
    }
    .stars-cluster.stars-cluster-2 .star-11,
    .stars-cluster.stars-cluster-2 .star-16 {
      -webkit-animation: shooting-star 10s ease-out 8s forwards;
              animation: shooting-star 10s ease-out 8s forwards;
    }
    .stars-cluster.stars-cluster-2 .star-16 {
      -webkit-animation-delay: 1s;
              animation-delay: 1s;
    }
    .stars-cluster.stars-cluster-2 .star-7 {
      -webkit-animation-delay: 9s;
              animation-delay: 9s;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
    }
    .stars-cluster.stars-cluster-2 .star-4 {
      -webkit-animation: shooting-star-2 11s ease-out 6s forwards infinite;
              animation: shooting-star-2 11s ease-out 6s forwards infinite;
    }
    .star {
      background-color: #f3f2d6;
      border-radius: 50%;
      position: absolute;
      -webkit-animation-name: pulsate;
              animation-name: pulsate;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-direction: alternate-reverse;
              animation-direction: alternate-reverse;
    }
    /**
     * ----------------------------------------
     * star generator
     * ---------------------------------------
    */
    .stars-cluster-1 .star-1 {
      width: 3px;
      height: 3px;
      opacity: 0.58538155;
      top: 38.15727651%;
      left: 22.25070759%;
      -webkit-animation-duration: 2.00105257s;
              animation-duration: 2.00105257s;
      -webkit-animation-delay: 0.75991641s;
              animation-delay: 0.75991641s;
    }
    .stars-cluster-1 .star-2 {
      width: 1px;
      height: 1px;
      opacity: 0.51874459;
      top: 17.91606576%;
      left: 47.0479337%;
      -webkit-animation-duration: 0.41815195s;
              animation-duration: 0.41815195s;
      -webkit-animation-delay: 0.98582734s;
              animation-delay: 0.98582734s;
    }
    .stars-cluster-1 .star-3 {
      width: 3px;
      height: 3px;
      opacity: 0.28994303;
      top: 22.15215622%;
      left: 3.05990623%;
      -webkit-animation-duration: 2.32843759s;
              animation-duration: 2.32843759s;
      -webkit-animation-delay: 0.44073083s;
              animation-delay: 0.44073083s;
    }
    .stars-cluster-1 .star-4 {
      width: 2px;
      height: 2px;
      opacity: 0.21053665;
      top: 32.23528154%;
      left: 28.14530418%;
      -webkit-animation-duration: 0.6369875s;
              animation-duration: 0.6369875s;
      -webkit-animation-delay: 0.86691446s;
              animation-delay: 0.86691446s;
    }
    .stars-cluster-1 .star-5 {
      width: 2px;
      height: 2px;
      opacity: 0.26247414;
      top: 83.9202157%;
      left: 68.47382858%;
      -webkit-animation-duration: 1.6117763s;
              animation-duration: 1.6117763s;
      -webkit-animation-delay: 0.97376709s;
              animation-delay: 0.97376709s;
    }
    .stars-cluster-1 .star-6 {
      width: 3px;
      height: 3px;
      opacity: 0.77229373;
      top: 49.61025927%;
      left: 92.79107803%;
      -webkit-animation-duration: 2.2912936s;
              animation-duration: 2.2912936s;
      -webkit-animation-delay: 0.57140768s;
              animation-delay: 0.57140768s;
    }
    .stars-cluster-1 .star-7 {
      width: 2px;
      height: 2px;
      opacity: 0.54869421;
      top: 19.73430803%;
      left: 84.23962574%;
      -webkit-animation-duration: 0.64875593s;
              animation-duration: 0.64875593s;
      -webkit-animation-delay: 0.88255993s;
              animation-delay: 0.88255993s;
    }
    .stars-cluster-1 .star-8 {
      width: 2px;
      height: 2px;
      opacity: 0.33248085;
      top: 67.50749333%;
      left: 24.0864682%;
      -webkit-animation-duration: 0.82725613s;
              animation-duration: 0.82725613s;
      -webkit-animation-delay: 0.25256893s;
              animation-delay: 0.25256893s;
    }
    .stars-cluster-1 .star-9 {
      width: 2px;
      height: 2px;
      opacity: 0.66955627;
      top: 73.80246667%;
      left: 3.38341221%;
      -webkit-animation-duration: 0.41947977s;
              animation-duration: 0.41947977s;
      -webkit-animation-delay: 0.68994882s;
              animation-delay: 0.68994882s;
    }
    .stars-cluster-1 .star-10 {
      width: 2px;
      height: 2px;
      opacity: 0.29348586;
      top: 59.85021719%;
      left: 64.2333529%;
      -webkit-animation-duration: 2.38044502s;
              animation-duration: 2.38044502s;
      -webkit-animation-delay: 0.79682409s;
              animation-delay: 0.79682409s;
    }
    .stars-cluster-1 .star-11 {
      width: 2px;
      height: 2px;
      opacity: 0.44634838;
      top: 34.28912302%;
      left: 82.7329746%;
      -webkit-animation-duration: 1.91330973s;
              animation-duration: 1.91330973s;
      -webkit-animation-delay: 0.44937917s;
              animation-delay: 0.44937917s;
    }
    .stars-cluster-1 .star-12 {
      width: 2px;
      height: 2px;
      opacity: .........完整代码请登录后点击上方下载按钮下载查看