论坛 › 欢乐水吧 › 学习套用一个黑黑 的 月照西楼 图片移动效果

小辣椒 发表于 2024-4-8 22:27

学习套用一个黑黑 的 月照西楼 图片移动效果

<style>
#papa { margin: 150px 0 0 calc(50% - 781px); width: 1400px; height: 566px; 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://xlaj.cn/assets/file/zp/20240408220128.jpg') no-repeat center/cover; z-index: -1; }
#papa::after { left: var(--begin2); transform: scale(-1,1); }
#play { position: absolute; right: 275px; top: 90px; width: 50px; mix-blend-mode: multiply; cursor: pointer; animation: rotating 5s linear infinite var(--state); }
#vid { position: absolute; width: calc(100% + 200px); height: 100%; object-fit: cover; mix-blend-mode: screen;opacity: .25; }
@keyframes rotating { to { transform: rotate(360deg); } }

#dt1{ position: absolute; width:90px; height: 80px; top: 80px; left: 184px; }
#dt2{ position: absolute; width:240px; height: 144px; top: 350px; left: 284px; }



</style>

<div id="papa">

<img id="dt1" src="https://xlaj.cn/assets/file/zp/20240408220202.gif " alt="" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20240408220229.gif" alt="" />




    <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/0a/1f/dc/3e7d4dff28be7008ce86dc731edb4d98/audio.mp3" autoplay></audio>
    <video id="vid" src="https://chuangshicdn.file.m.mvbox.cn/upload/bceab60d012a3b3b89d4193105e51073.mp4" autoplay muted loop></video>
    <img id="play" src="https://xlaj.cn/assets/file/zp/20240408220249.png" alt="" />
</div>

<script>
var ww = papa.offsetWidth;

var step = 0.3, 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>

小辣椒 发表于 2024-4-8 22:29

@马黑黑

黑黑套用玩一个，刚才自己修改了滤镜效果不理想，直接套用了

小辣椒 发表于 2024-4-8 22:30

作业完成，太迟了，下了，晚安了

马黑黑 发表于 2024-4-8 23:44

小辣椒 发表于 2024-4-8 22:30
作业完成，太迟了，下了，晚安了

注意休息

马黑黑 发表于 2024-4-8 23:45

小辣椒 发表于 2024-4-8 22:29
@马黑黑

黑黑套用玩一个，刚才自己修改了滤镜效果不理想，直接套用了

这个设计满分的

梦油 发表于 2024-4-9 10:06

小辣椒 发表于 2024-4-8 22:29
@马黑黑

黑黑套用玩一个，刚才自己修改了滤镜效果不理想，直接套用了

这个小船与背景搭配得太妙了。

流水光阴 发表于 2024-4-9 13:54

这里有探照灯{:4_173:}

流水光阴 发表于 2024-4-9 13:55

夜间好美

流水光阴 发表于 2024-4-9 13:55

感谢楼主分享

红影 发表于 2024-4-9 16:02

好幽静的夜景，还有灯光效果呢，有女子隐约闪现。
欣赏亲爱的好帖，尤其那一叶小舟的设计，特别美{:4_199:}

南无月 发表于 2024-4-9 17:54

小辣椒这个夜景动画整得太美了啊。
景色更加丰富，还有飞鸟和小船。。
把这个移动效果用到了极致。。。{:4_199:}

南无月 发表于 2024-4-9 17:55

小播周围还有光芒四射~~
小辣椒你的贴子出得又快又美 ，效果绝佳 。。{:4_187:}

樵歌 发表于 2024-4-11 20:24

璀璨的夜景，江南的小桥流轻舟，冬雨划桨，小辣椒红袖添香。。。：

樵歌 发表于 2024-4-11 20:26

在外平板上不好弄，要不然都有写字的冲动了。

樵歌 发表于 2024-4-11 20:30

音乐也动听！象时光在悠然流过，象一阵清风拂过发丝，，，，又象一对恋人牵手走过幽深小径。

千羽 发表于 2024-4-11 20:33

波光粼粼的水面，映衬着五彩的美丽灯光，映入眼帘的景象太美了{:4_187:}

千羽 发表于 2024-4-11 20:40

古色古香的大桥和两岸的美景在缓缓移动，那一页扁舟给画面带来了{:4_199:}生动和情趣，小辣椒的创意和制作都是棒棒哒

千羽 发表于 2024-4-11 20:44

樵歌 发表于 2024-4-11 20:26
在外平板上不好弄，要不然都有写字的冲动了。

樵歌老师，这令人陶醉的美景你正好去游览下……{:4_173:}

千羽 发表于 2024-4-11 20:52

问好小辣椒，么么哒{:4_185:}

小辣椒 发表于 2024-4-11 23:10

马黑黑 发表于 2024-4-8 23:44
注意休息

谢谢黑黑关心

查看完整版本: 学习套用一个黑黑 的 月照西楼 图片移动效果