css实现一个黑色大气的音乐播放器app交互ui效果代码-html代码-BFW代码库

代码语言：html
所属分类：多媒体
代码描述：css实现一个黑色大气的音乐播放器app交互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>
        /* PRESS THE MENU BUTTON FOR ANIMATION */
        /* PRESS PLAY BUTTON TO LISTEN THE DEMO SONG */
        
        /* As seen on: "https://dribbble.com/shots/2144866-Day-5-Music-Player-Rebound/" */
        
        /* THANK YOU! */
        
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
        
        body {
          background: #ff564c;
          padding: 0;
          margin: 0;
        }
        
        @keyframes harlem {
          0% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
          }
          20% {
            transform: scale(1.03, 1);
            -webkit-transform: scale(1.03, 1);
            -moz-transform: scale(1.03, 1);
            -o-transform: scale(1.03, 1);
            -ms-transform: scale(1.03, 1);
          }
          40% {
            transform: scale(0.97, 1);
            -webkit-transform: scale(0.97, 1);
            -moz-transform: scale(0.97, 1);
            -o-transform: scale(0.97, 1);
            -ms-transform: scale(0.97, 1);
          }
          60% {
            transform: scale(1.01, 1);
            -webkit-transform: scale(1.01, 1);
            -moz-transform: scale(1.01, 1);
            -o-transform: scale(1.01, 1);
            -ms-transform: scale(1.01, 1);
          }
          80% {
            transform: scale(0.99, 1);
            -webkit-transform: scale(0.99, 1);
            -moz-transform: scale(0.99, 1);
            -o-transform: scale(0.99, 1);
            -ms-transform: scale(0.99, 1);
          }
          100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
          }
        }
        
        h2 {
          margin: 0;
          padding: 0;
          font-size: 10px;
          line-height: 10px;
          letter-spacing: 2.5px;
          font-family: 'Open Sans';
          font-weight: 700;
          color: #fff;
        }
        
        h3 {
          margin: 0;
          padding: 0;
          font-size: 11px;
          line-height: 11px;
          font-family: 'Open Sans';
          font-weight: 400;
          color: #777;
        }
        
        h4 {
          margin: 0 0 5px 29px;
          padding: 0;
          font-size: 14px;
          line-height: 14px;
          font-family: 'Open Sans';
          font-weight: 700;
          color: #fff;
        }
        
        h5 {
          margin: 0;
          padding: 0;
          font-size: 13px;
          line-height: 13px;
          font-family: 'Open Sans';
          font-weight: 700;
          color: #6d6d6d;
        }
        
        h6 {
          margin: 0;
          padding: 0;
          font-size: 13px;
          line-height: 13px;
          font-family: 'Open Sans';
          font-weight: 700;
          color: #f0f0f0;
        }
        
        .screen {
          background-color: #fff;
          padding: 0;
          height: 650px;
          width: 366px;
          position: absolute;
          left: 50%;
        	top: 0;
        	transform: translate(-50%, 0);
          box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
          overflow: hidden;
          margin: 30px 0;
        }
        
        .header {
          display: inline-flex;
          margin: 0 0 40px 0;
        }
        
        input[type=checkbox] {
          visibility: hidden;
          margin: 0;
          padding: 0;
          z-index: 10;
        }
        
        label.main:before {
          position: absolute;
          top: 23px;
          left: 23px;
          font-family: FontAwesome;
          content: '\f0c9';
          color: #959595;
          font-size: 16px;
          line-height: 16px;
          cursor: pointer;
          z-index: 10;
          transition: all 0.3s ease-in;
        }
        
        label.main:hover:before {
          color: #bbb;
        }
        
        .screen > #magicButton:checked ~ label.main:before {
          color: #ff564c;
          transition: all 0.3s ease-in;
        }
        
        .coverImage {
          background: url('//repo.bfw.wiki/bfwrepo/images/music/tumblr_nlhsir3adc1sk2qobo1_12801.gif') no-repeat;
          background-size: cover;
          width: 366px;
          height: 366px;
          padding: 0;
          margin: 0;
          position: absolute;
          top: 0;
          left: 0;
          transform-origin: 0% 0%;
          transition: all 0.3s ease-in;
        }
        
        .screen > #magicButton:checked ~ .coverImage {
          transform: scale(0.251, 0.251);
          left: 23px;
          top: 60px;
          transition: all 0.3s ease-in;
          border-radius: 20px;
        }
        
        .search:before {
          position: absolute;
          top: 23px;
          right: 23px;
          font-family: FontAwesome;
          content: '\f002';
          color: #959595;
          font-size: 16px;
          line-height: 16px;
          cursor: pointer;
          z-index: 10;
          transition: all 0.3s ease-in;
        }
        
        .search:hover:before {
          color: #bbb;
        }
        
        .bodyPlayer {
          position: absolute;
          top: 366px;
          left: 0;
          margin: 0;
          padding: 0;
          height: 286px;
          width: 366px;
          background: #111;
          transition: all 0.3s ease-in;
        }
        
        .screen > #magicButton:checked ~ .bodyPlayer {
          height: 470px;
          left: 0;
          top: 180px;
          transition: all 0.3s ease-in;
        }
        
        .list {
          border-spacing: 0px 2px;
          width: 342px;
          visibility: hidden;
          opacity: 0;
          position: absolute;
          top: 378px;
          left: 12px;
          transform-origin: 0% 0%;
          transform: scale(0.1, 0.1);
          transition: all 0.3s ease-in;
        }
        
        .list tr {
          transform-origin: 0% 50%;
          height: 50px;
          text-align: center;
          background: #1d1d1d;
          text-indent: 8px;
        }
        
        .list tr:hover {
          background: #222;
          cursor: pointer;
        }
        
        .title {
          width: 215px;
          text-align: left;
          text-indent: 15px;
          transition: all 0.11s ease-in;
        }
        
        .list tr:hover .title {
          padding-left: 5px;
          width: 210px;
          transition: all 0.11s ease-in;
        }
        
        .screen > #magicButton:checked ~ .list {
          top: 192px;
          left: 12px;
          opacity: 1;
          visibility: visible;
          transform: scale(1, 1);
          transition: all 0.3s ease-in;
        }
        
        .screen > #magicButton:checked ~ table tr:nth-child(1) {
          opacity: 1;
          animation: harlem 0.3s linear forwards;
          animation-delay: 0.185s;
        }
        
        .screen > #magicButton:checked ~ table tr:nth-child(2) {
          animation: harlem 0.3s linear forwards;
          animation-delay: 0.2s;
        }
        
        .screen > #magicButton:checked ~ table tr:nth-child(3) {
          animation: harlem 0.3s linear forwards;
          animation-delay: 0.215s;
        }
        
        .screen > #magicButton:checked ~ table tr:nth-child(4) {
          animation: harlem 0.3s linear forwards;
          animation-delay: 0.23s;
        }
        
        .screen > #magicButton:checked ~ table tr:nth-child(5) {
          animation: harlem 0.3s linear forwards;
          animation-delay: 0.245s;
        }
        
        .screen > #magicButton:checked ~ table tr:nth-child(6) {
          animation: harlem 0.3s linear forwards;
          animation-delay: 0.26s;
        }
        
        .screen > #magicButton:checked ~ table tr:nth-child(7) {
          animation: harlem 0.3s linear forwards;
          animation-delay: 0.275s;
        }
        
        .screen > #magicButton:checked ~ table tr:nth-child(8) {
          animation: harlem 0.3s linear forwards;
          animation-delay: 0.29s;
        }
        
        .screen > #magicButton:checked ~ table tr:nth-child(9) {
          animation: harlem 0.3s linear forwards;
          animation-delay: 0.305s;
        }
        
        label.zmr:before {
          font-family: FontAwesome;
          content: "\f08a";
          color: #777;
          font-size: 15px;
          line-height: 15px;
          cursor: pointer;
          z-index: 10;
          transition: all 0.15s linear;
        }
        
        td > #heart:checked ~ label.zmr:before {
          content: "\f004";
          color: #ff564c;
          transition: all 0.15s linear;
        }
        
        td > #heart1:checked ~ label.zmr:before {
          content: "\f004";
          color: #ff564c;
          transition: all 0.15s linear;
        }
        
        td > #heart2:checked ~ label.zmr:before {
          content: "\f004";
          color: #ff564c;
          transition: all 0.15s linear;
        }
        
        td > #heart3:checked ~ label.zmr:before {
          content: "\f004";
          color: #ff564c;
          transition: all 0.15s linear;
        }
        
        td > #heart4:checked ~ label.zmr:before {
          content: "\f004";
          color: #ff564c;
          transition: all 0.15s linear;
        }
        
        td > #heart5:checked ~ label.zmr:before {
          content: "\f004";
          color: #ff564c;
          transition: all 0.15s linear;
        }
        
        td > #heart6:checked ~ label.zmr:before {
          content: "\f004";
          color: #ff564c;
          transition: all 0.15s linear;
        }
        
        td > #heart7:checked ~ label.zmr:before {
          content: "\f004";
          color: #ff564c;
          transition: all 0.15s linear;
        }
        
        td > #heart8:checked ~ label.zmr:before {
          content: "\f004";
          color: #ff564c;
          transition: all 0.15s linear;
        }
        
        .bar {
          background: url('http://imgh.us/bar_3.svg') no-repeat;
          background-size: 100%;
          width: 320px;
          height: 21px;
          position: absolute;
          top: 407px;
          left: 23px;
          transform-origin: 0% 0%;
          transition: all 0.3s ease-in;
        }
        
        .screen > #magicButton:checked ~ .bar {
          top: 119px;
          left: 126px;
          transform: scale(0.6875, 0.6875);
          transition: all 0.3s ease-in;
        }
        
        .info {
          width: 157px;
          position: absolute;
          left: 104px;
          top: 440px;
          transition: all 0.3s ease-in;
        }
        
        .screen > #magicButton:checked ~ .info {
          top: 66px;
          left: 126px;
          text-align: left;
          transition: all 0.3s ease-in;
        }
        
        .screen > #magicButton:checked ~ .info h4 {
          margin-left: 0;
          font-size: 16px;
          color: #111111;
          transition: all 0.3s ease-in;
        }
        
        .player {
          background: none;
          text-align: center;
          font-family: FontAwesome;
          color: #fff;
          font-size: 26px;
          line-height: 26px;
          width: 216px;
          height: 35px;
          position: absolute;
          bottom: 100px;
          left: 48%;
          transform: translate(-50%, 0);
          z-index: 10;
          transition: all 0.3s ease-in;
          border-spacing: 0;
        }
        
        .player td {
          width: 72px;
        }
        
        .backward:before {
          content: "\f04a";
          cursor: pointer;
          transition: all 0.15s linear;
        }
        
        .play:before {
          content: "\f04b";
          cursor: pointer;
          transition: all 0.15s linear;
        }
        
        .forward:before {
          conten.........完整代码请登录后点击上方下载按钮下载查看