南无月 发表于 2024-4-9 21:22

【黑师代码】清喜于时光TO:马黑黑（学习黑师《月照西楼》背景移动效果）

<style>
#papa {margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: navy; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa::before , #papa::after { position: absolute; content: ''; left: var(--begin1); top: 0px; width: 100%; height: 100%; background: url('https://pic.imgdb.cn/item/6615298a68eb935713604900.webp') no-repeat center/cover; z-index: -1; }
#papa::after { left: var(--begin2); transform: scale(-1,1); }
#play { position: absolute; right: 310px; top: 230px; width:60px; cursor: pointer; animation: rotating 5s linear infinite var(--state); z-index: 91;}
#mypic { position: absolute; width: 1700px; height: 900px; mix-blend-mode:normal; }
#vid { position: absolute; width: calc(100% + 160px); height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; filter: opacity(.96);}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="Https://hxhuxi.oss-cn-beijing.aliyuncs.com/MP3/261.mp3" autoplay></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/06/5b503d6c75c2a.mp4" autoplay muted loop></video>
        <img id="play" src="https://638183.freep.cn/638183/small/hxxb.webp" alt="" />
        <img id="mypic" src="https://pic.imgdb.cn/item/66153d0768eb93571380246f.png">
</div>

<script>
var ww = papa.offsetWidth;

var step = 0.2, begin1 = 0, begin2 = ww, raf;

aud.loop = false;
aud.onpause = aud.onplaying = () =>moving();
aud.onseeked = () => cancelAnimationFrame(raf);
aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };

play.onclick = () => { aud.paused ? aud.play() : aud.pause(); };

var moving = () => {
    begin1 += step;
    begin2 += step;
    if(begin1 >= ww) begin1 = -ww;
    if(begin2 >= ww) begin2 = -ww;
    let b2 = begin2 + (begin1 >= 0 ? 1 : -1);
    papa.style.setProperty('--begin1', begin1 + 'px');
    papa.style.setProperty('--begin2', b2 + 'px');
    aud.paused
      ? (cancelAnimationFrame(raf), papa.style.setProperty('--state', 'paused'), vid.pause())
      : (raf = requestAnimationFrame(moving), papa.style.setProperty('--state', 'running'),vid.play());
};
</script>
<br><br><br><br><br>

南无月 发表于 2024-4-9 21:25

@马黑黑
老师来瞧瞧，跟了昨天的移动背景贴，看看效果如何。。
还有，早点好起来哈。。{:4_204:}

红影 发表于 2024-4-9 21:44

很清爽的画面，这个制作真美。原来滚动的是森林，面上的这张透明图真漂亮，字体设计也漂亮。
月儿的帖子让人看得神清气爽呢{:4_199:}

红影 发表于 2024-4-9 21:45

南无月 发表于 2024-4-9 21:25
@马黑黑
老师来瞧瞧，跟了昨天的移动背景贴，看看效果如何。。
还有，早点好起来哈。。

这样的祝福真好，同祝黑黑早日好起来{:4_187:}

马黑黑 发表于 2024-4-9 22:29

南无月 发表于 2024-4-9 21:25
@马黑黑
老师来瞧瞧，跟了昨天的移动背景贴，看看效果如何。。
还有，早点好起来哈。。

送个大镁铝好得快{:4_170:}

马黑黑 发表于 2024-4-9 22:30

帖子很养眼

南无月 发表于 2024-4-10 18:45

马黑黑 发表于 2024-4-9 22:30
帖子很养眼

{:4_187:}

南无月 发表于 2024-4-10 18:47

马黑黑 发表于 2024-4-9 22:29
送个大镁铝好得快

看得出来是越来越好了{:4_170:}

南无月 发表于 2024-4-10 18:47

红影 发表于 2024-4-9 21:45
这样的祝福真好，同祝黑黑早日好起来

{:4_199:}问好影子，同祝黑黑

南无月 发表于 2024-4-10 18:48

红影 发表于 2024-4-9 21:44
很清爽的画面，这个制作真美。原来滚动的是森林，面上的这张透明图真漂亮，字体设计也漂亮。
月儿的帖子让 ...

{:4_187:}
影子回复看了 就让人开心，真是太好了。

南无月 发表于 2024-4-10 18:50

马黑黑 发表于 2024-4-9 22:30
帖子很养眼

{:4_189:}旧伤赶紧好了，好养花养猫

马黑黑 发表于 2024-4-10 19:13

南无月 发表于 2024-4-10 18:50
旧伤赶紧好了，好养花养猫

一时半会儿也好不了

马黑黑 发表于 2024-4-10 19:15

南无月 发表于 2024-4-10 18:47
看得出来是越来越好了

多少好一点点吧

马黑黑 发表于 2024-4-10 19:16

南无月 发表于 2024-4-10 18:45


谢花

南无月 发表于 2024-4-10 19:21

马黑黑 发表于 2024-4-10 19:13
一时半会儿也好不了

知道，这个疼就是急不来，慢慢好的。
就是身体的呼唤和部分生活习惯的博弈。。

南无月 发表于 2024-4-10 19:25

马黑黑 发表于 2024-4-10 19:15
多少好一点点吧

叫你还熬夜。。{:4_173:}还是得多躺多休。。

南无月 发表于 2024-4-10 19:25

马黑黑 发表于 2024-4-10 19:16
谢花
花好看，看着乐就好得快

红影 发表于 2024-4-10 20:38

南无月 发表于 2024-4-10 18:47
问好影子，同祝黑黑

看到黑黑的回复，很轻松喜悦，看起来没什么大碍了呢{:4_204:}

红影 发表于 2024-4-10 20:40

南无月 发表于 2024-4-10 18:48
影子回复看了 就让人开心，真是太好了。

是月儿的帖子看了让人心情轻松呢，多么美啊，这样的地方。空气也新鲜{:4_204:}

世外桃源 发表于 2024-4-12 14:34

欣赏佳作 感谢分享
页: [1] 2
查看完整版本: 【黑师代码】清喜于时光TO:马黑黑（学习黑师《月照西楼》背景移动效果）