gsap+pixi+pixi实现简洁音乐播放器代码
代码语言:html
所属分类:多媒体
代码描述:gsap+pixi+pixi实现简洁音乐播放器代码效果代码,可切换歌曲。
代码标签: gsap pixi pixi 简洁 音乐 播放器 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;300;400;700;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
</style>
<link rel="stylesheet" href="https://use.typekit.net/lur2ajg.css">
<link rel="stylesheet" href="https://use.typekit.net/nmu2ane.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>
<link rel='stylesheet' href='https://use.typekit.net/lur2ajg.css'>
<style>
* {
box-sizing: border-box;
}
body {
height: 100%;
min-height: 100vh;
margin: auto;
max-width: 100%;
width: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.demoWrapper {
padding: 10px;
background: white;
box-sizing: border-box;
resize: horizontal;
border: 1px dashed;
overflow: auto;
max-width: 100%;
height: calc(100vh - 16px);
}
.wrapper {
position: relative;
position: absolute;
/*height: 420px;*/
width: 300px;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: visible;
text-shadow: 0 0.025em black;
position: relative;
margin: auto;
}
.container {
width: clamp(45%, 280px, 40vw);
height: clamp(340px, 70vh, 90%);
align-items: center;
justify-content: center;
padding: 20px 10px;
margin: auto;
position: relative;
backdrop-filter: blur(18px) saturate(1.25);
box-sizing: border-box;
z-index: 2;
border-radius: 15px;
display: flex;
flex-direction: column;
text-shadow: 0 0.025em rgb(69 82 98);
box-shadow: 0px 1px 24px -1px rgba(0, 0, 0, 0.2),
0 1.5em 2em -1em rgba(0, 0, 0, 0.8), inset 0 0.0625em 0 white,
inset 0 -0.125em 0.0625em rgba(0, 0, 0, 0.3);
border: 2px outset rgba(255, 255, 255, 0.3);
background-image: linear-gradient(
145deg,
rgba(255, 255, 255, 0.15),
transparent
);
background-color: rgba(0, 0, 0, 0.05);
transform: scale(1.1);
}
.track_image {
display: flex;
position: relative;
justify-content: center;
margin-top: 5px;
margin-bottom: 10px;
}
.trackbuttons {
display: flex;
align-items: center;
width: 56%;
justify-content: space-around;
margin: 4px 10px;
margin-top: 10px;
}
.trackbuttons .mybutton i {
z-index: 9;
}
img#thumbnail {
width: 55%;
height: auto;
position: relative;
bottom: 10px;
}
.vinylcover {
content: url(//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png);
object-fit: cover;
z-index: 5;
width: 60%;
height: auto;
bottom: 6px;
position: absolute;
filter: contrast(1.25) saturate(2.5)
drop-shadow(0.5px 1px 1px rgba(0, 0, 0, 0.2));
opacity: 0.95;
}
.songtitles {
text-align: center;
width: 90%;
top: -2px;
position: relative;
}
.song-title {
font-weight: 800;
font-size: 15px;
margin-bottom: 4px;
margin-top: 2px;
font-family: alfarn, sans-serif;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical;
color: hsl(200 2% 80% / 1);
text-shadow: -0.5px -0.5px 0.5px #000, 0.125px 0.15px 0.5px #ffff;
}
span#h2 {
font-family: "Lato", sans-serif;
font-family: "Poppins", sans-serif;
font-family: "Inter", sans-serif;
font-size: 13px;
font-family: owners-narrow, sans-serif;
font-family: owners, sans-serif;
/* font-family: alfarn-2, sans-serif; */
font-weight: 400;
opacity: 0.8;
line-height: 1;
}
.song-artist {
font-size: 12px;
letter-spacing: 0.1rem;
margin-bottom: 5px;
text-transform: uppercase;
line-height: 1.5;
font-family: Helvetica, "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
color: hsl(200 2% 70% / 1);
text-shadow: -0.5px -0.5px 0.5px #000, 0.125px 0.15px 0.5px #ffff;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical;
color: #ddd;
}
.song-artist {
letter-spacing: 0.1rem;
margin-bottom: 5px;
text-transform: uppercase;
line-height: 1.5;
text-shadow: -0.5px -0.5px 0.5px #000, 0.125px 0.15px 0.5px #ffff;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical;
color: #c9c9c9;
font-size: 14px;
letter-spacing: 0.08em;
font-family: "acumin-pro";
}
.playlist {
height: 22px;
}
.song-playlist {
font-size: 13px;
letter-spacing: 0.13rem;
top: -25px;
position: relative;
text-transform: uppercase;
line-height: 1.5;
font-family: Helvetica, "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
letter-spacing: 1px;
padding-bottom: 8px;
padding-top: 20px;
color: hsl(213 5% 50% / 1);
mix-blend-mode: color;
font-weight: 400;
font-family: so.........完整代码请登录后点击上方下载按钮下载查看
网友评论0