plyr实现一个水纹波动背景的音乐播放器代码-html代码-BFW代码库

plyr实现一个水纹波动背景的音乐播放器代码

代码语言：html

所属分类：多媒体

代码描述：plyr实现一个水纹波动背景的音乐播放器代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/plyr2.0.13.css">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Oxygen:300,400,700");
        html, body {
          height: 100%;
        }
        
        body {
          background: radial-gradient(ellipse at center, #2d2d2d 0%, #2d2d2d 35%, #2d2d2d 100%);
          overflow: hidden;
        }
        
        .ocean {
          height: 5%;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          background: #015871;
        }
        
        .wave {
          background: url(//repo.bfw.wiki/bfwrepo/images/card/wave.svg) repeat-x;
          position: absolute;
          top: -198px;
          width: 6400px;
          height: 198px;
          animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
          transform: translate3d(0, 0, 0);
        }
        
        .wave:nth-of-type(2) {
          top: -175px;
          animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
          opacity: 1;
        }
        
        @keyframes wave {
          0% {
            margin-left: 0;
          }
          100% {
            margin-left: -1600px;
          }
        }
        @keyframes swell {
          0%, 100% {
            transform: translate3d(0, -25px, 0);
          }
          50% {
            transform: translate3d(0, 5px, 0);
          }
        }
        /* Font Family
        ================================================== */
        /* Global Styles
        ================================================== */
        html, body {
          -webkit-font-smoothing: antialiased;
          -webkit-text-size-adjust: 100%;
          background-color: #2d2d2d;
          color: #fff;
          font-size: 105%;
          font-family: "Oxygen", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 300;
          letter-spacing: 0.025rem;
          line-height: 1.618;
          padding: 1rem 0;
        }
        
        * {
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          -webkit-tap-highlight-color: transparent;
        }
        
        /* Setup
       .........完整代码请登录后点击上方下载按钮下载查看