css实现一个大气动感交互式音乐播放器UI效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：css实现一个大气动感交互式音乐播放器UI效果代码

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

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

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @charset "UTF-8";
    @import url("https://fonts.googleapis.com/css?family=Nunito:600");
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
    * {
      box-sizing: border-box;
    }
    
    body {
      background: #cbded8;
      margin: 0;
      overflow: hidden;
    }
    
    .b_overlay {
      position: fixed;
      background: rgba(69, 195, 155, 0.64);
      left: 0;
      top: 0;
      display: none;
      width: 100%;
      height: 100%;
    }
    
    .bar {
      background: white;
      position: fixed;
      bottom: -50px;
      -webkit-animation: up 300ms 500ms forwards;
              animation: up 300ms 500ms forwards;
      width: 100%;
      height: 48px;
      -webkit-user-select: none;
      /* Chrome all / Safari all */
      -moz-user-select: none;
      /* Firefox all */
      -ms-user-select: none;
      /* IE 10+ */
      user-select: none;
      font-weight: 600;
      font-family: "Nunito", sans-serif;
      font-size: 14px;
      z-index: 2;
    }
    .bar_inner__left {
      float: left;
    }
    .bar_inner__left .brand {
      background: #45c39b;
      position: relative;
      padding: 15px;
      display: inline-block;
      margin-right: -4px;
      transition: all 300ms;
    }
    .bar_inner__left .brand a {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: 1;
    }
    .bar_inner__left .brand img {
      width: 40px;
      position: relative;
      top: 2px;
    }
    .bar_inner__left .brand:hover {
      background: #35a07e;
    }
    .bar_inner__left .selection {
      position: relative;
      display: inline-block;
      background: white;
      border-right: 1px solid #e6e6e6;
      padding: 15px 20px 18px 20px;
      cursor: pointer;
      font-weight: 600;
      color: #5d6265;
      min-width: 340px;
      position: relative;
      top: -1px;
      transition: background 300ms, border 300ms;
    }
    .bar_inner__left .selection:hover {
      background: #eceff3;
      border-right: 1px solid #d9dfe7;
    }
    .bar_inner__left .selection .fa-codepen {
      margin-right: 8px;
      font-size: 15px;
    }
    .bar_inner__left .selection .fa-chevron-up {
      font-size: 10px;
      opacity: 0.4;
      position: relative;
      top: 4px;
      margin-left: 8px;
      float: right;
      transition: all 200ms;
      transform-origin: 5px 6px;
    }
    .bar_inner__left .selection_list {
      position: absolute;
      background: #eceff3;
      border-bottom: 0;
      opacity: 0;
      bottom: -250px;
      width: 100%;
      max-height: 165px;
      z-index: -1;
      border-bottom: 1px solid #dce2e9;
      transition: bottom 200ms, opacity 200ms;
      left: 0;
      overflow: scroll;
    }
    .bar_inner__left .selection_list::-webkit-scrollbar {
      width: 3px;
      background-color: #F5F5F5;
    }
    .bar_inner__left .selection_list::-webkit-scrollbar-thumb {
      background-color: #000000;
      border: 2px solid #555555;
    }
    .bar_inner__left .selection_list a {
      display: block;
      text-decoration: none;
      padding: 15px;
      position: relative;
      overflow: hidden;
      transition: all 300ms;
      color: #5d6265;
    }
    .bar_inner__left .selection_list a i {
      position: absolute;
      opacity: 0;
      right: -40px;
      transition: right 300ms, opacity 300ms;
      font-size: 10px;
      top: 20px;
    }
    .bar_inner__left .selection_list a:hover {
      background: #dfe4eb;
      text-indent: 10px;
      color: #309292;
    }
    .bar_inner__left .selection_list a:hover i {
      opacity: 1;
      right: 20px;
    }
    .bar_inner__left p {
      margin: 0;
      display: inline-block;
      margin-left: 14px;
    }
    .bar_inner__left p i {
      color: red;
      font-size: 10px;
    }
    .bar_inner__right {
      float: right;
      color: white;
    }
    .bar_inner__right i {
      margin-right: 10px;
    }
    .bar_inner__right .youtube {
      background: #e22424;
      display: inline-block;
      margin-left: -4px;
      padding: 16px 19px 17px 19px;
      transition: all 300ms;
      cursor: pointer;
      position: relative;
    }
    .bar_inner__right .youtube i.fa-chevron-right {
      margin-left: 10px;
      font-size: 10px;
      position: absolute;
      right: -100px;
      opacity: 0;
      transition: all 300ms;
      top: 20px;
    }
    .bar_inner__right .youtube i.fa-play {
      font-size: 12px;
    }
    .bar_inner__right .youtube .v_preview {
      background: #e22424;
      width: 102%;
      transition: all 300ms;
      position: absolute;
      height: 150px;
      left: 0;
      top: 0;
      z-index: -1;
    }
    .bar_inner__right .youtube:hover {
      background: #cc1b1b;
      padding: 16px 29px 17px 19px;
    }
    .bar_inner__right .youtube:hover i.fa-chevron-right {
      right: 0;
      opacity: 1;
    }
    .bar_inner__right .youtube:hover .v_preview {
      top: -150px;
    }
    .bar_inner__right .tweet {
      display: inline-block;
      color: #1da1f2;
      padding: 16px 20px 17px 20px;
      transition: all 300ms;
      cursor: pointer;
      position: relative;
      margin-left: -4px;
    }
    .bar_inner__right .tweet a {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }
    .bar_inner__right .tweet:hover {
      background: #0d92e3;
      color: white;
    }
    .bar_inner__right .codepen {
      display: inline-block;
      color: #5d6265;
      border-right: 1px solid #e6e6e6;
      padding: 16px 20px 17px 20px;
      transition: all 300ms;
      cursor: pointer;
      position: relative;
    }
    .bar_inner__right .codepen a {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }
    .bar_inner__right .codepen:hover {
      background: #1a1b1f;
      color: white;
    }
    
    .owl .left-eye,
    .owl .right-eye {
      border-radius: 50%;
      display: block;
      position: absolute;
      width: 15px;
      height: 15px;
      bottom: 71px;
      z-index: 2;
    }
    
    .owl .left-pupil,
    .owl .right-pupil {
      width: 8px;
      height: 8px;
      background: #000;
      border-radius: 50%;
      display: block;
      transform: translateY(0px);
      position: absolute;
      -webkit-animation: blink 3s infinite;
              animation: blink 3s infinite;
    }
    
    .owl {
      width: 100px;
      position: absolute;
      right: 60px;
      bottom: -140px;
      -webkit-animation: owl 1s 1s forwards, owl_bob 1.4s 2s infinite;
              animation: owl 1s 1s forwards, owl_bob 1.4s 2s infinite;
      transition: all 1s;
      z-index: 1;
    }
    .owl .left-eye {
      right: 63px;
    }
    .owl .right-eye {
      right: 23px;
    }
    .owl .love {
      opacity: 0;
      position: absolute;
      bottom: 50px;
      right: 94px;
      transition: all 0.2s 0.2s;
      width: 70px;
    }
    
    ._video_id,
    ._pen_id,
    ._pen_title {
      display: none;
    }
    
    @media (max-width: 900px) {
      .bar_inner__left, .bar_inner__right {
        width: 50%;
      }
      .bar_inner__left .tweet, .bar_inner__left .codepen, .bar_inner__right .tweet, .bar_inner__right .codepen {
        width: 20%;
        text-align: center;
      }
      .bar_inner__left .tweet i, .bar_inner__left .codepen i, .bar_inner__right .tweet i, .bar_inner__right .codepen i {
        margin: 0;
      }
      .bar_inner__left .youtube, .bar_inner__right .youtube {
        width: 60%;
        left: 4px;
      }
      .bar_inner__left span, .bar_inner__right span {
        display: none;
      }
      .bar_inner__left .brand {
        z-index: 1;
      }
      .bar_inner__left .selection {
        padding-left: 90px;
        left: 0;
        position: absolute;
        top: 1px;
        width: 50%;
      }
    }
    @media (max-width: 764px) {
      .bar_inner__left, .bar_inner__right {
        width: 100%;
      }
      .bar_inner__left .tweet, .bar_inner__left .codepen, .bar_inner__right .tweet, .bar_inner__right .codepen {
        width: 20%;
        display: none;
        border: none;
        text-align: center;
      }
      .bar_inner__left .tweet i, .bar_inner__left .codepen i, .bar_inner__right .tweet i, .bar_inner__right .codepen i {
        margin: 0;
      }
      .bar_inner__left .youtube, .bar_inner__right .youtube {
        width: 60%;
        display: none;
        left: 4px;
      }
      .bar_i.........完整代码请登录后点击上方下载按钮下载查看