论坛 › 祝福礼堂 › 鹰击长空（祝队长生日快乐）

马黑黑 发表于 2023-4-21 18:22

鹰击长空（祝队长生日快乐）

本帖最后由 马黑黑 于 2023-4-21 19:21 编辑 <br /><br /><style>
#mydiv {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp1/t3.webp') no-repeat center/cover;
        overflow: hidden;
        position: relative;
        --state: paused;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        width: 100px;
        height: 88px;
        background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
        offset-path: path('M0 60 Q500 200,1024 60');
        offset-distance: 0%;
        animation: move 10s infinite linear var(--state);
        cursor: pointer;
}
#mydiv::after {
        offset-path: path('M0 600 Q500 400,1024 600');
        transform: scale(1,-1);
        filter: blur(1px);
}
@keyframes move { to { offset-distance: 100%; } }
</style>

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

<script>
(function() {
        let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

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

马黑黑 发表于 2023-4-21 19:22

帖子代码：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=68145

马黑黑 发表于 2023-4-21 19:22

醉美水芙蓉 发表于 2023-4-21 19:18
欣赏黑黑老师美贴，同祝队长生日快乐！

晚上好

红影 发表于 2023-4-21 19:43

黑黑用了队长最喜欢的鹰做贺帖，真是有心了。借黑黑帖子，同祝队长生日快乐{:4_187:}

红影 发表于 2023-4-21 19:44

天上的鹰和水里的倒影都能暂停呢，真棒{:4_199:}

马黑黑 发表于 2023-4-21 20:05

红影 发表于 2023-4-21 19:43
黑黑用了队长最喜欢的鹰做贺帖，真是有心了。借黑黑帖子，同祝队长生日快乐

{:4_191:}

马黑黑 发表于 2023-4-21 20:05

红影 发表于 2023-4-21 19:44
天上的鹰和水里的倒影都能暂停呢，真棒

暂停是同步的

加林森 发表于 2023-4-21 20:20

谢谢老黑。让你费心了。{:5_108:}

绿叶清舟 发表于 2023-4-21 20:26

{:4_176:}队长生日快乐

马黑黑 发表于 2023-4-21 20:33

绿叶清舟 发表于 2023-4-21 20:26
队长生日快乐

同乐

马黑黑 发表于 2023-4-21 20:43

加林森 发表于 2023-4-21 20:20
谢谢老黑。让你费心了。

{:5_108:}

加林森 发表于 2023-4-21 20:44

马黑黑 发表于 2023-4-21 20:43


{:4_183:}

梦油 发表于 2023-4-21 21:07

队长的迎回来了。借黑黑先生美帖祝福队长生日快乐、幸福安康！{:4_204:}

马黑黑 发表于 2023-4-21 21:40

梦油 发表于 2023-4-21 21:07
队长的迎回来了。借黑黑先生美帖祝福队长生日快乐、幸福安康！

共同祝福

樵歌 发表于 2023-4-21 21:43

这帖子太有偶意了，祝加加康复后再展翅长空！在旅途中没做帖，只好借来祝贺了！

马黑黑 发表于 2023-4-22 08:16

樵歌 发表于 2023-4-21 21:43
这帖子太有偶意了，祝加加康复后再展翅长空！在旅途中没做帖，只好借来祝贺了！

出差呀

红影 发表于 2023-4-22 13:06

马黑黑 发表于 2023-4-21 20:05
暂停是同步的

嗯嗯，真棒{:4_204:}

马黑黑 发表于 2023-4-22 13:34

红影 发表于 2023-4-22 13:06
嗯嗯，真棒

这是雕虫小技而已呀

梦油 发表于 2023-4-22 14:24

马黑黑 发表于 2023-4-22 13:34
这是雕虫小技而已呀

看来，你的好东西还多着呐。{:4_199:}

查看完整版本: 鹰击长空（祝队长生日快乐）