千羽 发表于 2023-4-18 20:24

黑黑老师代码学习】《春》

本帖最后由 千羽 于 2023-4-18 20:54 编辑 <br /><br /><style>
#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: green url('https://pic.imgdb.cn/item/643e89690d2dde5777c59352.jpg') center/cover no-repeat;overflow: hidden;filter: contrast(1.2);perspective: 1000px;position: relative;--state: paused; --sy: 6deg; --sz: 100deg;}
#mplayer {position: absolute;width: 300px;height: 300px;right: 30px;bottom: 0;cursor: pointer;transform-style: preserve-3d;}
.line {position: absolute;width: 1px;height: 100%;transform-style: preserve-3d;}
@keyframes rot { to { transform: rotateY(calc(var(--sy) + 360deg)) rotateZ(calc(var(--sz) + 360deg)); } }
</style>

<div id="papa">
      <div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5256846" autoplay loop></audio>
<img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 50px; top: 976px; left: 850px;" />
      <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 60px; top: 980px; left: 784px; transform: rotate(-60deg);" />
   <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 80px; top: 1066px; left: 816px;" />
<img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 45px; top: 676px; left: 570px; transform: rotate(-35deg);" />
<script>
Array.from({length: 64}).forEach( (item,key) => {
      let sp = document.createElement('span');
      sp.className = 'line';
      sp.style.cssText += `
                --sy: ${Math.random() * 720 - 360}deg;
                --sz: ${Math.random() * 720 - 360}deg;
                background: rgba(${Math.random() * 50}, ${Math.random() * 255}, ${Math.random() * 50}, .8);
                transform: rotateY(var(--sy)) rotateZ(var(--sz));
                animation: rot 30s linear infinite var(--state);
      `;
      mplayer.appendChild(sp);
});
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

千羽 发表于 2023-4-18 20:35

发上来就变位置了{:4_203:}好烦人

红影 发表于 2023-4-18 21:05

千羽 发表于 2023-4-18 20:35
发上来就变位置了好烦人

很漂亮啊，羽儿是说什么的位置变了？播放器还是动图？

红影 发表于 2023-4-18 21:06

羽儿的图图漂亮，再加上这转动的刺播，这个帖子美极了{:4_199:}

千羽 发表于 2023-4-18 21:07

红影 发表于 2023-4-18 21:05
很漂亮啊，羽儿是说什么的位置变了？播放器还是动图？

是蝴蝶动图{:4_201:}

顾-念 发表于 2023-4-18 21:07

高级，自动换屏。是好看 是好看

千羽 发表于 2023-4-18 21:08

红影 发表于 2023-4-18 21:06
羽儿的图图漂亮，再加上这转动的刺播，这个帖子美极了
影儿，这是我发帖后重新调的{:4_181:}总是龙不好，不会代码

小辣椒 发表于 2023-4-18 21:10

千羽的图图配黑黑播放器特别好看{:4_171:}{:4_199:}

千羽 发表于 2023-4-18 21:12

顾-念 发表于 2023-4-18 21:07
高级，自动换屏。是好看 是好看

谢谢顾念夸奖了，费了九牛二虎之力，还是做不好，不会代码{:4_181:}

千羽 发表于 2023-4-18 21:14

小辣椒 发表于 2023-4-18 21:10
千羽的图图配黑黑播放器特别好看

小辣椒来了，俺不会做……{:4_181:}

顾-念 发表于 2023-4-18 21:14

千羽 发表于 2023-4-18 21:12
谢谢顾念夸奖了，费了九牛二虎之力，还是做不好，不会代码

下次费九牛二虎三熊之力，就能更棒，别谦虚

千羽 发表于 2023-4-18 21:15

顾-念 发表于 2023-4-18 21:14
下次费九牛二虎三熊之力，就能更棒，别谦虚

{:4_189:}

醉美水芙蓉 发表于 2023-4-18 21:29

小辣椒 发表于 2023-4-18 21:32

千羽 发表于 2023-4-18 21:07
是蝴蝶动图

千羽 看看QQ

千羽 发表于 2023-4-18 21:33

醉美水芙蓉 发表于 2023-4-18 21:29
太漂亮了！

谢谢芙蓉{:4_187:}

千羽 发表于 2023-4-18 21:34

小辣椒 发表于 2023-4-18 21:32
千羽 看看QQ

好的，{:4_203:}

亦是金 发表于 2023-4-18 22:12

千羽 发表于 2023-4-18 21:07
是蝴蝶动图

蝴蝶动图改用position: relative;再定位，蝴蝶动图就不会乱窜了！

千羽 发表于 2023-4-18 22:16

亦是金 发表于 2023-4-18 22:12
蝴蝶动图改用position: relative;再定位，蝴蝶动图就不会乱窜了！

嗯，谢谢。给亦是金老师送上花花和香茶{:4_187:}{:4_204:}{:4_180:}

亦是金 发表于 2023-4-18 22:23

千羽 发表于 2023-4-18 22:16
嗯，谢谢。给亦是金老师送上花花和香茶

谢谢！{:4_187:}你的帖子真漂亮！点赞！{:4_178:}

红影 发表于 2023-4-18 23:02

千羽 发表于 2023-4-18 21:07
是蝴蝶动图

这些动图要放在<div id="papa">。。。</div>的里面，看你的代码，放在外面了，所以会变。
音乐可以放在外面，蝴蝶要放在里面。
页: [1] 2
查看完整版本: 黑黑老师代码学习】《春》