平凡 发表于 2024-1-2 11:49

纯音乐-转瞬


<style>
#papa {
      --state: paused;
      margin: 130px auto;
      left: -100px;
      width: 1100px;
      height: 700px;
      border: 5px solid tan;
      border-image: linear-gradient(35deg,PowDerBlue,Orchid,Indigo,Turquoise,red) 4;
      background: #3C3A50 url('http://www.yinhuabbs.cn/data/attachment/forum/202401/02/114648f59xf49f2qti2loz.jpg') center/cover no-repeat;
      box-shadow: 3px 8px 20px rgba(0,0,0,.6);
      overflow: hidden;
      display: grid;
      place-items: center;
      position: relative;
      animation: hue 10s infinite alternate var(--state);
}
.circle {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      border: 2px solid var(--bdcolor);
      cursor: pointer;
}

@keyframes hue {
      0% { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(360deg); }
}
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=571585964" loop="loop" autoplay="autoplay"></audio>

<script>
let total = 60, spans = [];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
Array.from({length: total}).forEach( (item) => {
      let sp = document.createElement('span');
      sp.className = 'circle';
      let aX = Math.random() * 360, aY = Math.random() * 360, ww = Math.random() * 600 + 200, hh = Math.random() * 400 + 200;
      
      papa.appendChild(sp);
      spans.push(sp);
});
spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);</script>

我也在 发表于 2024-1-2 12:04

坐上大沙发看榕哥的投影。

澜天 发表于 2024-1-2 15:40

随着颜色的变化
音乐更具色彩
而那一枝梅
则不断地诉说着自己的心事

一剑飘香红 发表于 2024-1-2 16:53

这个纯音不错，

平凡 发表于 2024-1-2 16:55

我也在 发表于 2024-1-2 12:04
坐上大沙发看榕哥的投影。

这投影简单了点，小也新年好

平凡 发表于 2024-1-2 16:55

一剑飘香红 发表于 2024-1-2 16:53
这个纯音不错，

剑哥新年好

平凡 发表于 2024-1-2 16:57

澜天 发表于 2024-1-2 15:40
随着颜色的变化
音乐更具色彩
而那一枝梅


澜天老兄这评价有点高
问好澜天兄，新年快乐

蓝魔 发表于 2024-1-2 22:32

欣赏一下，谢谢。

澜天 发表于 2024-1-3 20:49

平凡 发表于 2024-1-2 16:57
澜天老兄这评价有点高
问好澜天兄，新年快乐

这曲子很好听
心情很熨帖的感觉
问候平凡
新年快乐

平凡 发表于 2024-1-3 23:24

澜天 发表于 2024-1-3 20:49
这曲子很好听
心情很熨帖的感觉
问候平凡


主要是音乐能贴合图意及特效
页: [1] 2
查看完整版本: 纯音乐-转瞬