gsap实现炫酷三维碟片可交互式音乐播放器代码
代码语言:html
所属分类:多媒体
代码描述:gsap实现炫酷三维碟片可交互式音乐播放器代码,多个歌曲可滚动切换。
代码标签: gsap 炫酷 三维 碟片 可 交互式 音乐 播放器 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: "Avant Garde"; src: url("//repo.bfw.wiki/bfwrepo/fonts/avant-garde.woff2") format("woff2"); } body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; padding: 0; margin: 0; box-sizing: border-box; overflow: hidden; background: #fff; --mouseX: 0; --mouseY: 0; --x: 0; --progress: 0; font-family: "Avant Garde", Helvetica, sans-serif; cursor: none; } body:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -100; background: var(--label) 50% 50%/cover; filter: blur(10px); opacity: 0; transition: 0.3s ease-in-out; } body > span { position: absolute; bottom: 10px; font-size: 12px; transition: 0.3s ease-in-out; display: inline-block; overflow: hidden; padding: 0 20px; } body > span span { display: inline-block; position: relative; transition: 0.3s ease-in-out; } body > span span:before { content: "pause"; position: absolute; left: 0; top: 50%; transform: translateY(-150%); } body > strong { position: absolute; left: 0.5rem; top: 50%; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; font-size: 25px; } body > strong:last-of-type { left: auto; right: 0.5rem; } body > strong span { display: inline-block; padding: 2px 0; color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-image: linear-gradient(to bottom, transparent 25%, #000 33%, #000 66%, transparent 75%); background-size: 100% 300%; background-position: 50% 100%; -webkit-animation: shift 2s ease-in-out infinite; animation: shift 2s ease-in-out infinite; } @-webkit-keyframes shift { to { background-position: 50% 0%; } } @keyframes shift { to { background-position: 50% 0%; } } body > strong span:nth-of-type(1) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } body > strong span:nth-of-type(2) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } body > strong span:nth-of-type(3) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } body:before { transform-style: preserve-3d; content: ""; position: absolute; width: 100vw; height: 100vh; pointer-events: none; z-index: 99; -webkit-backdrop-filter: blur(30px) saturate(0); backdrop-filter: blur(30px) saturate(0); -webkit-mask: linear-gradient(to right, #000, transparent 25%, transparent 75%, #000); mask: linear-gradient(to right, #000, transparent 25%, transparent 75%, #000); } body:hover #cursor { opacity: 1; } body #cursor { width: 30px; height: 30px; transform: scale(0.75); border-radius: 100%; box-shadow: 0 0 0 5px #000; position: absolute; background: #fff; z-index: 999; pointer-events: none; opacity: 0; transition: opacity 0.5s ease-in-out; mix-blend-mode: soft-light; } body #cursor:before, body #cursor:after { content: ""; position: absolute; width: 50%; height: 50%; top: 25%; left: 25%; transition: 0.3s ease-in-out; transform: scaleY(1); background: #000; -webkit-clip-path: polygon(20% 0, 100% 50%, 100% 50%, 20% 100%); clip-path: polygon(20% 0, 100% 50%, 100% 50%, 20% 100%); } body #marquee { position: absolute; width: 100vw; z-index: 100; overflow: hidden; top: 50%; transform: translateY(-50%) skewY(20deg); left: 0; pointer-events: none; display: flex; padding: 5vw 0; z-index: -100; } body #marquee .content { display: flex; width: 100%; justify-content: space-around; -webkit-animation: scroll 18s linear infinite; animation: scroll 18s linear infinite; } body #marquee .content h1 { color: #efefef; font-size: 5vw; letter-spacing: 5.35vw; width: 100vw; line-height: 1; font-weight: 900; margin: 0; } body #marquee .content h1 span { display: inline-block; -webkit-animation: bob 1.5s ease-in-out infinite alternate; animation: bob 1.5s ease-in-out infinite alternate; } body #marquee .content h1 span:nth-of-type(1) { -webkit-animation-delay: -0.4444444444s; animation-delay: -0.4444444444s; } body #marquee .content h1 span:nth-of-type(2) { -webkit-animation-delay: -0.8888888889s; animation-delay: -0.8888888889s; } body #marquee .content h1 span:nth-of-type(3) { -webkit-animation-delay: -1.3333333333s; animation-delay: -1.3333333333s; } body #marquee .content h1 span:nth-of-type(4) { -webkit-animation-delay: -1.7777777778s; animation-delay: -1.7777777778s; } body #marquee .content h1 span:nth-of-type(5) { -webkit-animation-delay: -2.2222222222s; animation-delay: -2.2222222222s; } body #marquee .content h1 span:nth-of-type(6) { -webkit-animation-delay: -2.6666666667s; animation-delay: -2.6666666667s; } body #marquee .content h1 span:nth-of-type(7) { -webkit-animation-delay: -3.1111111111s; animation-delay: -3.1111111111s; } body #marquee .content h1 span:nth-of-type(8) { -webkit-animation-delay: -3.5555555556s; animation-delay: -3.5555555556s; } body #marquee .content h1 span:nth-of-type(9) { -webkit-animation-delay: -4s; animation-delay: -4s; } body #marquee .content h1 span:nth-of-type(10) { -webkit-animation-delay: -4.4444444444s; animation-delay: -4.4444444444s; } body #marquee .content h1 span:nth-of-type(11) { -webkit-animation-delay: -4.8888888889s; animation-delay: -4.8888888889s; } body #marquee .content h1 span:nth-of-type(12) { -webkit-animation-delay: -5.3333333333s; animation-delay: -5.3333333333s; } body #marquee .content h1 span:nth-of-type(13) { -webkit-animation-delay: -5.7777777778s; animation-delay: -5.7777777778s; } body #marquee .content h1 span:nth-of-type(14) { -webkit-animation-delay: -6.2222222222s; animation-delay: -6.2222222222s; } body #marquee .content h1 span:nth-of-type(15) { -webkit-animation-delay: -6.6666666667s; animation-delay: -6.6666666667s; } body #marquee .content h1 span:nth-of-type(16) { -webkit-animation-delay: -7.1111111111s; animation-delay: -7.1111111111s; } body #marquee .content h1 span:nth-of-type(17) { -webkit-animation-delay: -7.5555555556s; animation-delay: -7.5555555556s; } body #marquee .content h1 span:nth-of-type(18) { -webkit-animation-delay: -8s; animation-delay: -8s; } body #marquee .content h1 span:nth-of-type(19) { -webkit-animation-delay: -8.4444444444s; animation-delay: -8.4444444444s; } body #marquee .content h1 span:nth-of-type(20) { -webkit-animation-delay: -8.8888888889s; animation-delay: -8.8888888889s; } @-webkit-keyframes bob { from { transform: translateY(0vw) skewY(-20deg); } to { transform: translateY(2.5vw) skewY(-20deg); } } @keyframes bob { from { transform: translateY(0vw) skewY(-20deg); } to { transform: translateY(2.5vw) skewY(-20deg); } } @-webkit-keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } body.playing:after { transition: opacity 1s ease-in-out 0.5s; opacity: 1; transform: scale(1.25) translate(calc(var(--mouseX) * -5px), calc(var(--mouseY) * -5px)); } body.playing > span span { transform: translateY(100%); } body.playing #cursor:before { -webkit-clip-path: polygon(10% 0, 40% 0, 40% 100%, 10% 100%); clip-path: polygon(10% 0, 40% 0, 40% 100%, 10% 100%); } body.playing #cursor:after { -webkit-clip-path: polygon(60% 0, 90% 0, 90% 100%, 60% 100%); clip-path: polygon(60% 0, 90% 0, 90% 100%, 60% 100%); } body.playing #main { pointer-events: none; } body.playing #main .panel { pointer-events: all; } body.noclick #cursor:before, body.noclick #cursor:after { transform: scaleY(0); } body.noclick > span { transform: translateY(50px); } body.noclick #player { opacity: 0; } body.noclick #wrapper { pointer-events: none; } body #main { height: 100vh; width: 100vw; position: fixed; overflow: scroll; top: 0; left: 0; z-index: 9; } body #main * { transform-style: preserve-3d; } body #main #albums { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 9; pointer-events: none; display: grid; place-items: center; perspective: 600px; } body #main #albums .albumwrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; transform: rotateX(90deg); transform-origin: 50% calc(50vh + 50px); } body #main #albums .album { position: absolute; width: 500px; height: 500px; transform-origin: 50% 2500px; left: calc(50% - 250px); top: calc(50% - 250px); pointer-events: none; } body #main #albums .album audio { position: absolute; top: 0; left: 0; z-index: 999; pointer-events: none; opacity: 0; } body #main #albums .album.playing .cover { transform: rotateX(-90deg) translateY(100vh) scale(0.5); transition: transform 0.75s cubic-bezier(0.275, 0.885, 0.32, 1) 0.3s; } body #main #albums .album.playing .cover span { transform: translateY(-50%) rotate(180deg) translateX(75vw); } body #main #albums .album.playing .cover span:before { -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition: -webkit-clip-path 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.075) 0s; transition: clip-path 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.075) 0s; transition: clip-path 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.075) 0s, -webkit-clip-path 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.075) 0s; } body #main #albums .album.playing .cover span:last-of-type { transform: translateY(-50%) translateX(75vw); } body #main #albums .album.playing .cover:after { transition: 0.3s ease-in-out; transform: rotateY(0deg) translateZ(-2px); } body #main #albums .album.playing .cover:before { top: 200%; transition: top 0.5s cubic-bezier(0.275, 0.885, 0.32, 1) 0.3s; } body #main #albums .album.playing .cover img { transition: 0.3s ease-in-out; transform: rotateY(0deg); } body #main #albums .album .cover { width: 100%; height: 100%; transform-origin: 50% 325px; transform: rotateX(-90deg) translateY(15px) scale(0.75); top: 0; left: 0; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.075); } body #main #albums .album .cover span { position: absolute; left: -50px; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; display: inline-block; height: 100%; top: 50%; transform: translateY(-50%) rotate(180deg); font-weight: 900; pointer-events: none; transition: transform 0.75s cubic-bezier(0.375, 0.885, 0.32, 1) 0.6s; font-size: 20px; } body #main #albums .album .cover span:before { content: ""; position: absolute; width: 490px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%23000000; stroke-width:1.5; stroke-linecap:round; %7D %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 50%/80px 80px repeat-x; animation: waving 3s linear infinite reverse; transform: scaleX(1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition: -webkit-clip-path 1s cubic-bezier(0.175, 0.885, 0.32, 1.075) 1s; transition: clip-path 1s cubic-bezier(0.175, 0.885, 0.32, 1.075) 1s; transition: clip-path 1s cubic-bezier(0.175, 0.885, 0.32, 1.075) 1s, -webkit-clip-path 1s cubic-bezier(0.175, 0.885, 0.32, 1.075) 1s; left: -480px; top: 0; transform-origin: 100% 5px; transform: rotate(-90deg); } @-webkit-keyframes waving { to { background-position: 80px 50%, 160px 50%; } } @keyframes waving { to { background-position: 80px 50%, 160px 50%; } } body #main #albums .album .cover span strong { display: inline-block; position: relative; background: #fff; z-index: 2; padding-bottom: 10px; } body #main #albums .album .cover span:last-of-type { left: auto; right: -50px; transform: translateY(-50%); } body #main #albums .album .cover:before, body #main #albums .album .cover:after { content: ""; position: absolute; width: 100%; height: 100%; top: 135%; left: 0; } body #main #albums .album .cover:before { background: linear-gradient(to top, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.005) 50%); transform: rotateY(calc(var(--mouseX) * 7.5deg)) rotateX(calc(var(--mouseY) * -7.5deg + 45deg)) rotate(180deg) translateZ(225px); transition: top 1s cubic-bezier(0.275, 0.885, 0.32, 1) 0s; } body #main #albums .album .cover:after { top: 0; transform: rotateY(calc(var(--mouseX) * 7.5deg)) rotateX(calc(var(--mouseY) * 7.5deg)) translateZ(-1.5px) translateX(calc(var(--mouseX) * -4px)) translateY(calc(var(--mouseY) * 3px)) scale(1.005); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), var(--src) 50% 50%/cover; } body #main #albums .album .cover img, body #main #albums .album .cover:after { border-radius: 3px; } body #main #albums .album .cover img { height: 500px; width: auto; -o-object-fit: cover; object-fit: cover; transform: rotateY(calc(var(--mouseX) * 7.5deg)) rotateX(calc(var(--mouseY) * 7.5deg)); } body #main #albums .album:nth-of-type(1) { transform: rotate(calc(var(--progress) * -360deg + 0deg)); } body #main #albums .album:nth-of-type(2) { transform: rotate(calc(var(--progress) * -360deg + 36deg)); } body #main #albums .album:nth-of-type(3) { transform: rotate(calc(var(--progress) * -360deg + 72deg)); } body #main #albums .album:nth-of-type(4) { transform: rotate(calc(var(--progress) * -360deg + 108deg)); } body #main #albums .album:nth-of-type(5) { transform: rotate(calc(var(--progress) * -360deg + 144deg)); } body #main #albums .album:nth-of-type(6) { transform: rotate(calc(var(--progress) * -360deg + 180deg)); } body #main #albums .album:nth-of-type(7) { transform: rotate(calc(var(--progress) * -360deg + 216deg)); } body #main #albums .album:nth-of-type(8) { transform: rotate(calc(var(--progress) * -360deg + 252deg)); } body #main #albums .album:nth-of-type(9) { transform: rotate(calc(var(--progress) * -360deg + 288deg)); } body #main #albums .album:nth-of-type(10) { transform: rotate(calc(var(--progress) * -360deg + 324deg)); } body #main #wrapper { height: 1000vh; width: 100vw; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(10, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } body #main #wrapper .panel { height: 100vh; width: 100vw; z-index: 999; } body.scale #player { transform: scale(1); transition: transform 1s ease-in-out 0s; } body #lp, body .base { -webkit-animation: stopPlaying 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.075) 1 forwards; animation: stopPlaying 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.075) 1 forwards; } @-webkit-keyframes stopPlaying { from { transform: rotateX(calc(70deg + (var(--mouseY) * 10deg))) rotate(calc(-35deg + (var(--mouseX) * 20deg))) translateZ(var(--z2)) translate(0); } to { transform: rotateX(0) rotate(0) translateZ(var(--z)) translate(var(--x), var(--y)); } } @keyframes stopPlaying { from { transform: rotateX(calc(70deg + (var(--mouseY) * 10deg))) rotate(calc(-35deg + (var(--mouseX) * 20deg))) translateZ(var(--z2)) translate(0); } to { transform: rotateX(0) rotate(0) translateZ(var(--z)) translate(var(--x), var(--y)); } } body .wrap { --z: -200px; --z2: 0px; --y: 0px; } body #lp { width: 300px; height: 300px; border-radius: 100%; z-index: 999; top: 75px; left: 25px; --z: 300px; --z2: 10px; --x: 25px; --y: -25px; transform: translateZ(var(--z)); transform-origin: calc(50% + 25px) 50%; } body #lp .disc, body #lp .disc:before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 100%; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: rotateX(0deg) translateZ(0px); } body #lp .disc:before { background: radial-gradient(circle at center, #fff 5px, #000 5px, #000 6px, transparent 5.5px, transparent 40px, #fff 40px, #fff 41px, #000 41px, #000 75px, rgba(255, 255, 255, 0.001) 100px), var(--label) 50% 50%/100px 100px no-repeat, repeating-radial-gradient(circle at center, #000 2px, #222 2px, #222 3px, #000 3px, #000 5px); } body.playing #lp .disc { transform: rotateX(180deg) translateZ(0px); transition: transform 0.4s ease-in-out; } body.playing #lp, body.playing .base { -webkit-animation: startPlaying 0.5s ease-in-out 1 forwards; animation: startPlaying 0.5s ease-in-out 1 forwards; } body.playing #lp .disc:before, body.playing .base .disc:before { -webkit-animation: spin 3s linear infinite 0.5s; animation: spin 3s linear infinite 0.5s; } @-webkit-keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } } body.playing #lp #dials .slider .face, body.playing .base #dials .slider .face { transform: translateY(-60px) rotateX(-90deg); transition: 1.5s ease-in-out 0.5s; } body.playing #lp #dials .dial, body.playing .base #dials .dial { transform: translateZ(0px) rotateX(-90deg); transition-delay: 0.35s; } body.playing #lp #dials .dial:nth-of-type(2), body.playing .base #dials .dial:nth-of-type(2) { transition-delay: 0.45s; } body.playing .wrap { transform: translateZ(0px); } @-webkit-keyframes startPlaying { from { transform: rotateX(0) rotate(0) translateZ(var(--z)) translate(var(--x), var(--y)); } to { transform: rotateX(calc(70deg + (var(--mouseY) * 10deg))) rotate(calc(-35deg + (var(--mouseX) * 20deg))) translateZ(var(--z2)) translate(0, 0) scale(1.05); } } @keyframes startPlaying { from { transform: rotateX(0) rotate(0) translateZ(var(--z)) translate(var(--x), var(--y)); } to { transform: rotateX(calc(70deg + (var(--mouseY) * 10deg))) rotate(calc(-35deg + (var(--mouseX) * 20deg))) translateZ(var(--z2)) translate(0, 0) scale(1.05); } } body .wrap { transform: translateZ(-100px); transition: 0.5s ease-in-out; } body #player { width: 600px; height: 600px; position: relative; display: grid; place-items: center; transition: transform 1s ease-in-out 1.5s; transform: scale(0.5); pointer-events: none; perspective: 600px; opacity: 1; filter: drop-shadow(-1px 0 0 #000) drop-shadow(0px -1px 0 #000) drop-shadow(1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(1.5px 0 0 #000) drop-shadow(0 -1.5px 0 #000) drop-shadow(0 1.5px 0 #000); } body #player * { transform-style: preserve-3d; position: absolute; } body #player *:before, body #player *:after { transform-style: preserve-3d; position: absolute; } body #dials { width: 80px; height: 20px; bottom: 10px; right: 10px; } body #dials .slider { right: 30px; bottom: 50px; height: 75px; wid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0