论坛 › 欢乐水吧 › 学习图片无缝连接效果

小辣椒 发表于 2024-4-6 21:08

学习图片无缝连接效果

<style>
#mydiv {
        margin: 120px 0 0 calc(50% - 733px);
        width: 1302px;
        height: 753px;
        background: lightgreen url('https://pic.imgdb.cn/item/6610cd1068eb9357135e721b.jpg') no-repeat center/cover;
        box-shadow: 4px 4px 8px gray;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#mydiv::before , #mydiv::after {
        position: absolute;
        content: '';
        left: var(--begin1);
        top: 0px;
        width: 100%;
        height: 100%;
        background: url('https://pic.imgdb.cn/item/6610cd1068eb9357135e721b.jpg') no-repeat center/cover;
        z-index: -1;
}

#mydiv::after {
        left: var(--begin2);
        transform: scale(-1,1);
}
#play {
        position: absolute;
        left: calc(50% - 50px);
        bottom: 10px;
        width: 100px;
        cursor: pointer;
        animation: rotating 5s linear infinite var(--state);
}
@keyframes rotating { to { transform: rotate(360deg); } }

#dt2{ position: absolute; width:205px; height: 142px; top: 370px; left: 800px; }
#dt3{ position: absolute; width: 451px; height: 249px; top: 20px; left: 300px; }

</style>

<div id="mydiv">
<img id="dt2" src="https://pic.imgdb.cn/item/6610cd3b68eb9357135eccbf.gif" alt="" />

<img id="dt3" src="https://xlaj.cn/bfq/20240331/wbbs/fn.gif" alt="" />

        <audio id="aud" src="https://s138.ananas.chaoxing.com/sv-w9/audio/27/32/93/72f9840b455f57a46611a88a6e386810/audio.mp3" autoplay></audio>
        <img id="play" src="https://pic.imgdb.cn/item/661013c568eb93571345cc0c.png" alt="" />
</div>

<script>

var ww = mydiv.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;
        mydiv.style.setProperty('--begin1', begin1 + 'px');
        mydiv.style.setProperty('--begin2', begin2 + 'px');
        aud.paused
                ? (cancelAnimationFrame(raf), mydiv.style.setProperty('--state', 'paused'))
                : (raf = requestAnimationFrame(moving), mydiv.style.setProperty('--state', 'running'));
};

</script>

小辣椒 发表于 2024-4-6 21:10

@马黑黑

黑黑看见你今天又是一个还没有去仔细看代码，这个是昨天的，反正不用动脑子，直接套用了代码{:4_170:}

梦油 发表于 2024-4-6 21:11

无缝衔接的图真漂亮。你的悟性很好。

马黑黑 发表于 2024-4-6 21:14

小辣椒 发表于 2024-4-6 21:10
@马黑黑

黑黑看见你今天又是一个还没有去仔细看代码，这个是昨天的，反正不用动脑子，直接套用了代码{: ...

你这个不是昨天和今天的案例，是前几天的。这个也是可以的，但是，请确认一下手机端的效果，有条件试一下果机。

小辣椒 发表于 2024-4-6 21:14

梦油 发表于 2024-4-6 21:11
无缝衔接的图真漂亮。你的悟性很好。

梦油真快，谢谢欣赏，谢谢夸奖哦，都是套用黑黑的代码的

小辣椒 发表于 2024-4-6 21:16

马黑黑 发表于 2024-4-6 21:14
你这个不是昨天和今天的案例，是前几天的。这个也是可以的，但是，请确认一下手机端的效果，有条件试一下 ...

好的，我这个是昨天看见的

马黑黑 发表于 2024-4-6 21:18

小辣椒 发表于 2024-4-6 21:16
好的，我这个是昨天看见的

但不是昨天的模板。不过在计算机上的表现是完美的。

小辣椒 发表于 2024-4-6 21:33

马黑黑 发表于 2024-4-6 21:18
但不是昨天的模板。不过在计算机上的表现是完美的。

主要教程没有看全的

红影 发表于 2024-4-6 21:58

这条小船的设计太妙了，在滚动图片下，仿佛在随波飘荡，亲爱的构思太奇妙了{:4_199:}

红影 发表于 2024-4-6 21:59

滚动速度还能再低点，否则感觉小船太快了{:4_196:}

小辣椒 发表于 2024-4-6 22:00

红影 发表于 2024-4-6 21:59
滚动速度还能再低点，否则感觉小船太快了

亲爱的，我找了代码，不会加这个，你帮忙加一个吧，让图速度慢一点

马黑黑 发表于 2024-4-6 23:11

小辣椒 发表于 2024-4-6 21:33
主要教程没有看全的

没关系，咱们是多种方式同时上

红影 发表于 2024-4-7 00:07

小辣椒 发表于 2024-4-6 22:00
亲爱的，我找了代码，不会加这个，你帮忙加一个吧，让图速度慢一点

我记得黑黑讲过，是step那个设置，去试了一下，果然。现在慢了，亲爱的也可以调成自己想要的速度。

樵歌 发表于 2024-4-7 07:10

小辣椒，你是最棒的！{:4_187:}

樵歌 发表于 2024-4-7 07:12

就特别喜欢那小动图图，三个姑娘摇着小乌篷船儿，看风景的人们都在看她们的。{:4_189:}

庶民 发表于 2024-4-7 08:49

大有长进。

老谟深虑 发表于 2024-4-7 11:29

         欣赏老师的音画，点赞！

梦油 发表于 2024-4-7 16:00

小辣椒 发表于 2024-4-6 21:14
梦油真快，谢谢欣赏，谢谢夸奖哦，都是套用黑黑的代码的

聪明人学得快。

庶民 发表于 2024-4-7 17:42

意境真美，羡慕。

小辣椒 发表于 2024-4-7 21:06

马黑黑 发表于 2024-4-6 23:11
没关系，咱们是多种方式同时上

那我就慢慢来

查看完整版本: 学习图片无缝连接效果