绿叶清舟 发表于 2024-3-1 13:38

What Am I to Do


<style>
#papa {
      --state: paused;
      margin: -258px;
      width: 1100px;
      height: 700px;
      border: 2px solid tan;
      border-image: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
      background: #3C3A50 url('https://pic.imgdb.cn/item/65e14a6f9f345e8d0304d264.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: 300px;
      height: 300px;
      left: 40%; top: 280px;
      border-radius: 50%;
      border: 2px solid var(--bdcolor);
      cursor: pointer;
}
@keyframes rotZ {
      0% { transform: perspective(2000px) translateZ(-1000px) rotateX(var(--degX)) rotateY(var(--degY)) rotateZ(0deg); }
      50% { transform: perspective(2000px) translateZ(10px) rotateX(calc(var(--degX) + 180deg)) rotateY(calc(var(--degY) + 180deg)) rotateZ(0deg); }
      100%{ transform: perspective(2000px) translateZ(-1000px) rotateX(calc(var(--degX) + 360deg)) rotateY(calc(var(--degY) + 360deg)) rotateZ(360deg); }
}
@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=866049864" 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() * 280 + 100, hh = Math.random() * 180 + 100;
      sp.style.cssText += `
                --bdcolor: #${Math.random().toString(16).substr(-6)};
                --degX: ${aX}deg;
                --degY: ${aY}deg;
                width: ${ww}px;
                height: ${ww}px;
                transform: perspective(2000px) rotateY(${aY}deg) rotateX(${aX}deg);
                animation: rotZ 16s infinite linear var(--state);
      `;
      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-3-1 14:28

喜欢{:4_173:}

红影 发表于 2024-3-1 14:37

很有寓意的变色音画呢，这些变幻的线条也是人物的复杂思绪吧{:4_199:}

红影 发表于 2024-3-1 14:39

这个好玩，评分都看不到呢，全藏到帖子底下去了{:4_173:}

樵歌 发表于 2024-3-1 19:32

越整越洋盘，越玄妙了{:4_173:}

冬天的雨 发表于 2024-3-1 20:52

评分看不见了

冬天的雨 发表于 2024-3-1 20:53

清舟这个是视频背景？冬雨没有看见背景图

冬天的雨 发表于 2024-3-1 20:55

手机看代码不知道有没有看全，没有mp4的

冬天的雨 发表于 2024-3-1 20:56

以后电脑欣赏了，清舟做帖辛苦了

绿叶清舟 发表于 2024-3-2 12:57

小文 发表于 2024-3-1 14:28
喜欢

谢谢小文支持

绿叶清舟 发表于 2024-3-2 12:57

冬天的雨 发表于 2024-3-1 20:55
手机看代码不知道有没有看全，没有mp4的

是没有mp4的

绿叶清舟 发表于 2024-3-2 12:58

冬天的雨 发表于 2024-3-1 20:56
以后电脑欣赏了，清舟做帖辛苦了

还好了，遇到有感觉的一点也不辛苦{:4_189:}

绿叶清舟 发表于 2024-3-2 12:58

冬天的雨 发表于 2024-3-1 20:53
清舟这个是视频背景？冬雨没有看见背景图

不是图片背景的了

绿叶清舟 发表于 2024-3-2 12:59

樵歌 发表于 2024-3-1 19:32
越整越洋盘，越玄妙了

一晕就玄了{:4_189:}

绿叶清舟 发表于 2024-3-2 12:59

红影 发表于 2024-3-1 14:39
这个好玩，评分都看不到呢，全藏到帖子底下去了

我能看到的啊

樵歌 发表于 2024-3-2 15:12

绿叶清舟 发表于 2024-3-2 12:59
一晕就玄了

还会偷偷吃分分{:4_189:}

红影 发表于 2024-3-2 18:13

绿叶清舟 发表于 2024-3-2 12:59
我能看到的啊

这个好奇特，像回复只楼主可见一样，我们看不到呢{:4_189:}

绿叶清舟 发表于 2024-3-3 20:59

樵歌 发表于 2024-3-2 15:12
还会偷偷吃分分

藏起来自己吃长肉{:4_189:}

樵歌 发表于 2024-3-4 21:19

绿叶清舟 发表于 2024-3-3 20:59
藏起来自己吃长肉

那是，太骨感不太好{:4_173:}

绿叶清舟 发表于 2024-3-5 11:42

樵歌 发表于 2024-3-4 21:19
那是，太骨感不太好

肉已经太多了，想藏点起来了{:4_189:}
页: [1] 2
查看完整版本: What Am I to Do