tailwind中性化风格音乐播放器效果-html代码-BFW代码库

代码语言：html

代码描述：tailwind中性化风格音乐播放器效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
<style>
/* 
Credits : 
Music Player Neumorphism Style by Sazzad Sazib 
https://dribbble.com/shots/9153970-Music-Player-Neumorphism-Style

Filter combination for inset-shadow 
https://codepen.io/venend/pen/KqKMOM
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");

body {
  font-family: "Open Sans", sans-serif;
  background-color: #131419;
}

.soft {
  box-shadow: -3px -3px 3px 0 rgba(255, 255, 255, 0.04),
    5px 5px 5px 0 rgba(0, 0, 0, 2);
}
.containerSoft {
  box-shadow: -6px -6px 16px 0 rgba(255, 255, 255, 0.1),
    6px 6px 16px 0 rgba(0, 0, 0, 2);
}
.imgSoft {
  box-shadow: -6px -6px 16px 0 rgba(255, 255, 255, 0.08),
    8px 8px 8px 0 rgba(0, 0, 0, 0.3);
}

.container {
  width: 480px;
  height: 750px;
  background-color: #17191e;
}

.eq-empty {
  color: #282b33;
}

.eq-filled {
  color: #c3c3c3;
}

.text-header {
  color: #505050;
}

.soft:active {
  box-shadow: -1px -1px 1px 0 rgba(255, 255, 255, 0.04),
    1px 1px 1px 0 rgba(0, 0, 0, 2);
}
.soft:focus {
  outline: none;
}
</style>

</head>
<body translate="no">
<div id="app" class="h-screen flex justify-center items-center">
<div class="container bg-white rounded-lg py-4 px-4 containerSoft">
<div class="flex mb-8">
<div class="w-1/3">
<button class="rounded ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-8 h-8" fill="#282b33">
<path d="M492 236H20c-11.046 0-20 8.954-20 20s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20zM492 76H20C8.954 76 0 84.954 0 96s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20zM492 396H20c-11.046 0-20 8.954-20 20s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20z" />
</svg>
</button>
</div>
<div class="w-1/3">
<h1 class="text-center text-header text-lg uppercase">
Music Player
</h1>
</div>
<div class="w-1/3"></div>
</div>
<div class="flex justify-center mb-8">
<div class="">
<img src="http://repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png" alt="cover" class="rounded-full w-64 h-64 imgSoft" />
</div>
</div>
<h1 class="text-center text-header text-xl font-bold">Ignite</h1>
<h2 class="text-center eq-empty text-lg mb-4">Alan Walker</h2>
<div class="px-16 mb-12">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100" width="100%" height="100%">
<g transform="translate(10,50)">
<line v-for="(yabs,index) in bars" :x1="index*10" :y1="-yabs" :x2="index*10" :y2="yabs" stroke="currentColor" stroke-linecap="round" stroke-width="6" :class="[index > 15 && index < 35 ? 'eq-filled' : 'eq-empty']" />
</g>
</svg>
</div>
<div id="buttons" class="flex justify-center items-center">
<button class="flex justify-center items-center  w-8 h-8 rounded-full soft">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.016 512.016" class="w-4 h-4" fill="#282b33" stroke="none">
<path d="M507.336 100.696l-96-96C406.76.12 399.88-1.256 393.896 1.24c-5.984 2.496-9.888 8.288-9.888 14.752v48h-208c-97.216 0-176 78.784-176 176 0 8.832 7.168 16 16 16h64c8.832 0 16-7.168 16-16 0-44.192 35.808-80 80-80h208v48c0 6.464 3.904 12.32 9.888 14.784 5.984 2.496 12.864 1.12 17.44-3.456l96-96c6.24-6.24 6.24-16.384 0-22.624zM496.008 255.992h-64c-8.832 0-16 7.168-16 16 0 44.192-35.808 80-80 80h-208v-48c0-6.464-3.904-12.32-9.888-14.784s-12.832-1.088-17.44 3.488l-96 96c-6.24 6.24-6.24 16.384 0 22.624l96 96c4.576 4.576 11.456 5.952 17.44 3.456s9.888-8.32 9.888-14.784v-48h208c97.216 0 176-78.784 176-176 0-8.832-7.168-16-16-16z" />
</svg>
</button>
<button class="flex justify-center items-center w-12 h-12 ml-6 rounded soft">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.77.........完整代码请登录后点击上方下载按钮下载查看