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