520赫兹

马黑黑 发表于 2022-11-10 07:53

马黑黑 发表于 2022-11-10 07:54

代码
<style>
#papa { margin: 120px 0 0 calc(50% - 581px); width: 1000px; height: 758px; background: gray url('https://638183.freep.cn/638183/t22/webp/520hz.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; perspective: 1000px; position: relative; z-index: 1; }
#mama { position: absolute; width: 620px; height: 620px; display: grid; grid-template-rows: repeat(8,8fr); grid-template-columns: repeat(8,8fr); border-radius: 50%; overflow: hidden; }
#mplayer { position: absolute; bottom: 10px; grid-template-columns: auto auto auto; gap: 6px; display: grid; place-items: center; font: normal 16px sans-serif; color: snow; z-index: 999; }
#btnplay, #mama { cursor: pointer; animation: rot 10s infinite linear; animation-play-state: var(--state); --state: paused; }
#prog { width: 200px; height: 20px; cursor: pointer; }
#lrc { --state: running; --motion: cover2; --tt: 1s; position: absolute; top: 10px; font: bold 2.4em sans-serif; color: hsl(240, 50%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(30, 10%, 10%, .95)); z-index: 1000; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg, hsla(240, 60%, 50%, .45), hsla(240, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mama > img, #mplayer > img { width: 40px; height: 40px; mix-blend-mode: screen; border-radius: 50%; transform-style: preserve-3d; }
#mama:hover .spark { zoom: 1.5; opacity: .95; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>

<div id="papa">
<div id="mama"></div>
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer">
<img id="btnplay" src="https://638183.freep.cn/638183/t22/gif/flash.gif" alt="" />
<progress id="prog" max="100"></progress>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1948572170.mp3" loop autoplay></audio>

<script>
(function() {
(function() {for(j=0; j<64; j++) {let ele = document.createElement('img'), size = Math.random()*50 + 10;ele.src = 'https://638183.freep.cn/638183/t22/gif/flash.gif';ele.className='spark';ele.alt = '';ele.style.cssText = `width: ${size}px;height: ${size}px;transform: rotate(${Math.random()*360}deg);opacity: .5;`;mama.appendChild(ele);}})();
let mKey = 0, mSeek = false, mFlag = true, lap = 0.5;
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
btnplay.onclick = mama.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - lap >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.setProperty('--state', 'paused'), mama.style.setProperty('--state', 'paused'), lrc.style.setProperty('--state', 'paused')) : (mama.style.setProperty('--state', 'running'), btnplay.style.setProperty('--state', 'running'), lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
})();
</script>

红影发表于 2022-11-10 09:17

这个有趣，播放器按钮和图图里的效果都是用的发电动图，图图里的效果还是鼠标可控的{:4_187:}

红影发表于 2022-11-10 09:17

这个发电图配合520赫兹的标题太形象了{:4_199:}

红影发表于 2022-11-10 09:18

小辣椒要的圆形效果的实际案例，@小辣椒快来{:4_187:}

红影发表于 2022-11-10 09:19

歌词同步的配色真漂亮，像有质感{:4_187:}

梦油发表于 2022-11-10 10:56

黑黑朋友的每一次出手都会给人一种惊奇。

樵歌发表于 2022-11-10 12:39

古代罗盘与现代科幻的融合。{:4_189:}

小辣椒 发表于 2022-11-10 21:45

红影发表于 2022-11-10 09:18
小辣椒要的圆形效果的实际案例，@小辣椒快来

亲爱的来了。。。。。今天迟了

小辣椒 发表于 2022-11-10 21:46

哇瑟~~~这个可以有控制的{:4_199:}

小辣椒 发表于 2022-11-10 21:47

先仔细看看。。。。

马黑黑 发表于 2022-11-10 21:48

小辣椒发表于 2022-11-10 21:46
哇瑟~~~这个可以有控制的

控制 animation 其实简单的，看需要不需要

马黑黑 发表于 2022-11-10 21:48

小辣椒发表于 2022-11-10 21:47
先仔细看看。。。。

不是太复杂的，相对简单

小辣椒 发表于 2022-11-10 21:49

奇怪，这个动图怎么会出来这个效果{:4_203:}

马黑黑 发表于 2022-11-10 21:49

樵歌发表于 2022-11-10 12:39
古代罗盘与现代科幻的融合。

你就想到罗盘

马黑黑 发表于 2022-11-10 21:50

红影发表于 2022-11-10 09:17
这个有趣，播放器按钮和图图里的效果都是用的发电动图，图图里的效果还是鼠标可控的

它也是用 animation 驱动的，控制起来容易

马黑黑 发表于 2022-11-10 21:50

红影发表于 2022-11-10 09:17
这个发电图配合520赫兹的标题太形象了

还不差

马黑黑 发表于 2022-11-10 21:50

梦油发表于 2022-11-10 10:56
黑黑朋友的每一次出手都会给人一种惊奇。

过奖过奖

小辣椒 发表于 2022-11-10 21:52

马黑黑发表于 2022-11-10 21:48
控制 animation 其实简单的，看需要不需要

黑黑你认为简单，小辣椒可是大难题的

马黑黑 发表于 2022-11-10 21:54

小辣椒发表于 2022-11-10 21:49
奇怪，这个动图怎么会出来这个效果

GIF图片，用了滤镜 mix-blend-mode: screen; ，这个混和的融合滤镜，screen 会将深色背景（尤其是黑色）去掉。再加上圆形、旋转、缩小/放大，效果就酱紫

页: [1] 2 3 4 5

花潮论坛's Archiver

520赫兹