T.S.D

马黑黑 发表于 2024-1-19 08:17

马黑黑 发表于 2024-1-19 08:19

代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/tsd.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; pointer-events: none; z-index: 1; }
#papa::before, #papa::after { position: absolute; content: ''; width: 200px; height: 200px; border-radius: 50%; filter: hue-rotate(var(--hue)) opacity(.95); transition: .75s; pointer-events: auto; }
#papa::before { left: 160px; top: 240px; background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); }
#papa::after { left: 240px; top: 300px; background: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%); }
#papa:hover::before, #papa:hover::after { cursor: pointer; transform: scale(.5); }
li-zi { position: absolute; width: 20px; height: 20px; border-radius: 50% 0; filter: hue-rotate(var(--hue)); }
@keyframes moving {
from { opacity: 0; transform: translate(0,0) rotate(2turn); }
to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
}
</style>

<div id="papa" title="播放/暂停"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1201611" autoplay loop></audio>

<script>
(function() {
let all = 70;
for(let i = 0; i < all; i++) {
   let lz = document.createElement('li-zi');
   let hudu = Math.PI / 180 * 360 / all * i;
   let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
   lz.style.cssText += `
         --x0: ${xx}px;
         --y0: ${yy}px;
         left: calc(50% - 10px);
         top: calc(50% - 10px);
         background: #${Math.random().toString(16).substr(-6)};
         animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
   `;
   papa.prepend(lz);
}

let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let render = () => papa.style.setProperty('--hue', (aud.currentTime * 10) % 360 + 'deg');
aud.addEventListener('timeupdate',render,false);
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
papa.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
})();
</script>

红影发表于 2024-1-19 09:42

好奇异的画面，音乐也很奇特。黑黑又一个充满创意的制作{:4_199:}

红影发表于 2024-1-19 09:44

按钮的变色好美，粒子的形态也漂亮{:4_187:}

红影发表于 2024-1-19 09:47

T、S、D:一般重复根音与五音,非必要不重复三音——重复三音是两个三音不能同时出现。T主功能,S下属功能,D属功能,它们都有各自的替代和弦。主功能组用字母T(Tonic)表示,下属功能组用字母S(Subdominant)表示,属功能用组字母D(Dominant)表示。

红影发表于 2024-1-19 09:48

没看懂标题，特地去搜了一下。{:4_173:}欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2024-1-19 11:58

红影发表于 2024-1-19 09:48
没看懂标题，特地去搜了一下。欣赏黑黑好帖

这支乐曲，是黑月亮帝国的一支，它的名字就叫 T.S.D，和你查到的东东有点联系的

马黑黑 发表于 2024-1-19 11:59

红影发表于 2024-1-19 09:44
按钮的变色好美，粒子的形态也漂亮

粒子也变色，因为它运动、消失，不细心感知不到

马黑黑 发表于 2024-1-19 12:00

红影发表于 2024-1-19 09:42
好奇异的画面，音乐也很奇特。黑黑又一个充满创意的制作

音乐与画面都很治愈的

樵歌发表于 2024-1-19 13:30

原来是动漫里的场景儿，难怪得好玄幻。音乐也像外星来的{:4_173:}

侃大山 发表于 2024-1-19 16:40

好看，很梦幻的场景{:4_204:}

醉美水芙蓉 发表于 2024-1-19 17:36

马黑黑 发表于 2024-1-19 18:56

醉美水芙蓉发表于 2024-1-19 17:36
播放器变色放大缩小！谢谢老师分享！

{:4_190:}

红影发表于 2024-1-19 20:25

马黑黑发表于 2024-1-19 11:58
这支乐曲，是黑月亮帝国的一支，它的名字就叫 T.S.D，和你查到的东东有点联系的

呵呵，习惯了对什么有疑问就去搜一下{:4_173:}

红影发表于 2024-1-19 20:26

马黑黑发表于 2024-1-19 11:59
粒子也变色，因为它运动、消失，不细心感知不到

还真没注意，只以为明暗在变化呢。
还有粒子路过按钮时的颜色变化也挺有趣的呢{:4_187:}

红影发表于 2024-1-19 20:27

马黑黑发表于 2024-1-19 12:00
音乐与画面都很治愈的

是的，很让人沉入的感觉{:4_204:}

马黑黑 发表于 2024-1-19 20:46

红影发表于 2024-1-19 20:27
是的，很让人沉入的感觉

{:4_181:}

马黑黑 发表于 2024-1-19 20:47

红影发表于 2024-1-19 20:26
还真没注意，只以为明暗在变化呢。
还有粒子路过按钮时的颜色变化也挺有趣的呢

这里面，::before 和 ::after 两个伪元素的层级关系就可以看出来了，后者默认处在较高的层级

马黑黑 发表于 2024-1-19 20:47

红影发表于 2024-1-19 20:25
呵呵，习惯了对什么有疑问就去搜一下

应该额

红影发表于 2024-1-19 21:28

马黑黑发表于 2024-1-19 20:46

静下心来时，尤其如此{:4_187:}

页: [1] 2 3 4

花潮论坛's Archiver

T.S.D