论坛 › 动画音画 › Rebirth（重生）

马黑黑 发表于 2024-1-14 20:37

Rebirth（重生）

本帖最后由 马黑黑 于 2024-1-14 20:41 编辑 <br /><br /><style>
#papa {
        margin: -70px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 777px;
        background: url('https://638183.freep.cn/638183/t24/webp/rebirth.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        z-index: 1;
        display: grid;
        place-items: center;
        position: relative;
}
#player {
        position: absolute;
        width: 300px;
        height: 300px;
        cursor: pointer;
        filter: opacity(.75) hue-rotate(270deg);
        background: url('https://638183.freep.cn/638183/t24/jpg/hofghl.jpg') repeat -300px 0 / cover;
        mask: url('https://638183.freep.cn/638183/web/svg/heart.svg') no-repeat center/cover;
        -webkit-mask: url('https://638183.freep.cn/638183/web/svg/heart.svg') no-repeat center/cover;
        animation: rot 10s infinite linear var(--state), bgmov 8s infinite linear var(--state);
}
li-zi {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: snow;
        opacity: .95;
        animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
@keyframes moving {
        from { transform: translate(var(--x0),var(--y0)); opacity: 1; }
        to { transform: translate(var(--x1),var(--y1)); opacity: .5; }
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes bgmov { to { background-position: 0 0; } }
</style>

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

<script>
(function() {
        let all = 60;
        for(let i = 0; i < all; i++) {
                let lz = document.createElement('li-zi');
                let hudu = Math.PI / 180 * 360 / all * i;
                let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
                lz.style.cssText += `
                        --x0: ${xx}px;
                        --y0: ${yy}px;
                        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');
        };
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-1-14 20:37

本帖最后由 马黑黑 于 2024-1-14 20:42 编辑

帖子代码
<style>
#papa {
      margin: 0 0 0 calc(50% - 681px);
      width: 1200px;
      height: 777px;
      background: url('https://638183.freep.cn/638183/t24/webp/rebirth.webp') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      overflow: hidden;
      z-index: 1;
      display: grid;
      place-items: center;
      position: relative;
}
#player {
      position: absolute;
      width: 300px;
      height: 300px;
      cursor: pointer;
      filter: opacity(.75) hue-rotate(270deg);
      background: url('https://638183.freep.cn/638183/t24/jpg/hofghl.jpg') repeat -300px 0 / cover;
      mask: url('https://638183.freep.cn/638183/web/svg/heart.svg') no-repeat center/cover;
      -webkit-mask: url('https://638183.freep.cn/638183/web/svg/heart.svg') no-repeat center/cover;
      animation: rot 10s infinite linear var(--state), bgmov 8s infinite linear var(--state);
}
li-zi {
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: snow;
      opacity: .95;
      animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
@keyframes moving {
      from { transform: translate(var(--x0),var(--y0)); opacity: 1; }
      to { transform: translate(var(--x1),var(--y1)); opacity: .5; }
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes bgmov { to { background-position: 0 0; } }
</style>

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

<script>
(function() {
      let all = 60;
      for(let i = 0; i < all; i++) {
                let lz = document.createElement('li-zi');
                let hudu = Math.PI / 180 * 360 / all * i;
                let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
                lz.style.cssText += `
                        --x0: ${xx}px;
                        --y0: ${yy}px;
                        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');
      };
      aud.addEventListener('playing', mState, false);
      aud.addEventListener('pause', mState, false);
      player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

醉美水芙蓉 发表于 2024-1-14 20:38

朵拉 发表于 2024-1-14 20:41

耐看，慢慢学习哈~~{:4_190:}

樵歌 发表于 2024-1-14 20:48

美得令人肝颤！下一世，等你{:4_170:}

马黑黑 发表于 2024-1-14 20:53

樵歌 发表于 2024-1-14 20:48
美得令人肝颤！下一世，等你

墙裂支持

马黑黑 发表于 2024-1-14 20:54

醉美水芙蓉 发表于 2024-1-14 20:38
欣赏黑黑老师精彩特效！花心很漂亮！

晚上好

马黑黑 发表于 2024-1-14 20:55

朵拉 发表于 2024-1-14 20:41
耐看，慢慢学习哈~~

{:4_191:}

樵歌 发表于 2024-1-14 21:16

马黑黑 发表于 2024-1-14 20:53
墙裂支持

开个玩笑，君子不夺人所好{:4_173:}

马黑黑 发表于 2024-1-14 21:24

樵歌 发表于 2024-1-14 21:16
开个玩笑，君子不夺人所好

意志不坚定{:4_189:}

红影 发表于 2024-1-14 22:54

做量个动态，就能让遮罩和背景错位移动了？我前面想想让背景水平移动，结果全跑了{:4_173:}

红影 发表于 2024-1-14 22:56

哦，是定位的关系，背景之前先移了个位置，遮罩没有。应该是这原因吧{:4_204:}

红影 发表于 2024-1-14 23:01

凤凰重生，寓意好美{:4_187:}

马黑黑 发表于 2024-1-14 23:14

红影 发表于 2024-1-14 22:54
做量个动态，就能让遮罩和背景错位移动了？我前面想想让背景水平移动，结果全跑了

这个要控制好尺寸。下回我做个介绍，一张背景图怎样无缝移动。

马黑黑 发表于 2024-1-14 23:15

红影 发表于 2024-1-14 23:01
凤凰重生，寓意好美

这是帖意，谢谢认同

红影 发表于 2024-1-14 23:49

马黑黑 发表于 2024-1-14 23:14
这个要控制好尺寸。下回我做个介绍，一张背景图怎样无缝移动。

嗯嗯，太好了{:4_199:}

红影 发表于 2024-1-14 23:49

马黑黑 发表于 2024-1-14 23:15
这是帖意，谢谢认同

还好我看出来了，开心{:4_205:}

庶民 发表于 2024-1-15 09:15

大气。

马黑黑 发表于 2024-1-15 10:56

庶民 发表于 2024-1-15 09:15
大气。

上午好

马黑黑 发表于 2024-1-15 10:58

红影 发表于 2024-1-14 23:49
还好我看出来了，开心

能够准确理解帖意，的确令人开心

查看完整版本: Rebirth（重生）