朵拉 发表于 2024-1-18 20:03

空 空（马黑黑原创）

本帖最后由 朵拉 于 2024-1-18 20:31 编辑 <br /><br /><style>
    #papa { margin: -70px 0 0 calc(50% - 721px); width: 1280px; height: 800px; background: url('https://pic.imgdb.cn/item/65a918ff871b83018aea09f8.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
    #player { position: absolute; left: 550px; top: 280px; mix-blend-mode: screen; cursor: pointer; transition: filter 1s; animation: rot 6s infinite linear var(--state); }
    #player:hover { filter: hue-rotate(160deg); }
    li-zi { position: absolute; left: 760px; top: 340px; width: 60px; height: 60px; opacity: .3; background: url('https://638183.freep.cn/638183/t23/btn/hxbj.png') no-repeat center/cover; }
    @keyframes moving { from { opacity: .3; transform: translate(0,0) rotate(0); } to { opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(3turn); } }
    @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1978621666" autoplay loop></audio>
    <img id="player" src="https://638183.freep.cn/638183/t23/btn/hxbj.png" alt="" />
</div>

<script>
(function() {
    let all = 30;
    for(let i = 0; i < all; i++) {
      let lz = document.createElement('li-zi');
      let hudu = Math.PI / 180 * 360 / all * i;
      let xx = 950 * Math.cos(hudu), yy = 850 * Math.sin(hudu);
      lz.style.cssText += `
            --x0: ${xx}px;
            --y0: ${yy}px;
            filter: hue-rotate(${Math.floor(Math.random() * 360)}deg);
            animation: moving ${Math.random() * 20 + 20}s ${1 - Math.random() * 20}s infinite var(--state);
      `;
      papa.prepend(lz);
    }
    let mState = () => aud.paused ? papa.style.setProperty('--state','paused') : papa.style.setProperty('--state','running');
    aud.addEventListener('playing',mState,false);
    aud.addEventListener('pause',mState,false);
    player.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

红影 发表于 2024-1-18 20:16

这个不是黑黑的帖子么？{:4_203:}

朵拉 发表于 2024-1-18 20:31

@马黑黑
马师 晚上好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-1-18 20:40

朵拉 发表于 2024-1-18 20:31
@马黑黑
马师 晚上好，学生交作业，请指正哈

{:4_190:}

梦油 发表于 2024-1-18 20:46

欣赏佳作，问候朵拉。

朵拉 发表于 2024-1-18 20:52

红影 发表于 2024-1-18 20:16
这个不是黑黑的帖子么？

影宝 晚上好，再看看呢{:4_204:}

红影 发表于 2024-1-18 21:21

朵拉 发表于 2024-1-18 20:52
影宝 晚上好，再看看呢

朵宝时先复制黑黑的代码，然后换图片的？看到前面好长一段时间都是黑黑的原来帖子。

朵拉 发表于 2024-1-18 22:38

本帖最后由 朵拉 于 2024-1-18 23:02 编辑

红影 发表于 2024-1-18 21:21
朵宝时先复制黑黑的代码，然后换图片的？看到前面好长一段时间都是黑黑的原来帖子。
复制黑师代码，然后更换，这样操作不可以？
影宝发的帖子 是自己编写代码的么？{:4_203:}

红影 发表于 2024-1-19 10:29

朵拉 发表于 2024-1-18 22:38
复制黑师代码，然后更换，这样操作不可以？
影宝发的帖子 是自己编写代码的么？

可以可以，每个人的做法都不一样，这个没什么的，玩得开心就好{:4_187:}

辫子哥哥 发表于 2024-1-20 06:34

图美歌好听{:4_174:}
页: [1]
查看完整版本: 空 空（马黑黑原创）