css布局实现一个中性的自适应音乐播放器ui效果代码-html代码-BFW代码库

css布局实现一个中性的自适应音乐播放器ui效果代码

代码语言：html

代码描述：css布局实现一个中性简洁的自适应音乐播放器ui效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600,700,800,900'>

    <style>
        * {
          font-family: "Poppins";
        }
        
        body {
          background: #f9e7f0;
          display: flex;
          height: 100vh;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: 2em;
          overflow-x: hidden;
        }
        
        .screen-1 {
          margin-top: auto;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
          background: #f8e7f1;
          box-shadow: 20px 20px 60px #d3c4cd, -20px -20px 60px #ffffff, 0 0 2vh 2vh #f9e7f0;
          padding: 1em;
          border-radius: 20px;
        }
        .screen-1 header {
          padding: 1.1em;
          display: flex;
          gap: 3.4em;
          color: #b6aaae;
        }
        .screen-1 header ion-icon {
          padding: 0.5em;
          background: linear-gradient(145deg, #fff7ff, #dfd0d9);
          box-shadow: 20px 20px 60px #d3c4cd, -20px -20px 60px #ffffff;
          border-radius: 50%;
        }
        .screen-1 header span {
          font-weight: bold;
          font-size: 0.7em;
          margin-top: 0.7em;
        }
        .screen-1 .song {
          margin-top: 4em;
          padding: 0.1em;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .screen-1 .song .img-container {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 1.1em;
        }
        .screen-1 .song .img-container img {
          border-radius: 50%;
          width: 10em;
          height: 10em;
          border: 0.45em solid #f6e0eb;
          box-shadow: 20px 20px 60px #d3c4cd, -20px -20px 60px #ffffff, 0 0 2vh 2vh #f9e7f0;
        }
        .screen-1 .song h1 {
          color: #675f63;
        }
        .screen-1 .song h6 {
          color: #bcaeb3;
          font-weight: normal;
          margin-top: -1em;
        }
        .screen-1 .slider {
          margin-top: 3em;
          display: flex;
          justify-content: center;
          align-items: cen.........完整代码请登录后点击上方下载按钮下载查看