小辣椒 发表于 2024-4-17 22:52

铸剑山庄 图片无缝链接效果

<style>
#papa {margin: 130px 0 20px 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/02/79/6f/fa6836a15d7329ec5eeae5aef4914f55/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-17 22:53

同一首完成:P

liumang 发表于 2024-4-18 21:14

这个无缝连接很完美

liumang 发表于 2024-4-18 21:15

谢谢小辣椒分享

小辣椒 发表于 2024-4-20 11:02

liumang 发表于 2024-4-18 21:15
谢谢小辣椒分享


liumang不客气

亦是金 发表于 2024-4-21 18:14

图片无缝衔接完美，好看！音乐好听！欣赏学习老师的精美制作！{:5_147:}

小辣椒 发表于 2024-4-28 13:19

亦是金 发表于 2024-4-21 18:14
图片无缝衔接完美，好看！音乐好听！欣赏学习老师的精美制作！

问好前辈，谢谢欣赏~~
页: [1]
查看完整版本: 铸剑山庄 图片无缝链接效果