起个网名好难 发表于 2024-4-6 21:18

樵歌 发表于 2024-4-6 20:59
选择的图非常好。怎么消去那线线。

理论上不应该存在间隙并且我也看不出哪有间隙，所以对“消除那线线”不知如何下手{:5_102:}

起个网名好难 发表于 2024-4-6 21:28

本帖最后由 起个网名好难 于 2024-4-7 00:31 编辑 <br /><br />樵歌 发表于 2024-4-6 20:59
选择的图非常好。怎么消去那线线。

滚动的拼图如下图，能看到哪有间隙吗？
<style>
#picBlk {
    width: calc(4 * 794px);
    height: 530px;
    position: relative;
    margin:50px auto 32px -300px;
}

#picBlk img {
    width: 794px;
    height:530px;
    float: left;margin-left:-1px;
}

#picBlk img:nth-child(even)        {
   transform: scaleX(-1);
}
</style>
<div id="picBlk">
    <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
</div>


起个网名好难 发表于 2024-4-6 21:33

本帖最后由 起个网名好难 于 2024-4-7 00:31 编辑 <br /><br />向右滚动<br>
<style>
#picBlk0 {
    width: calc(4 * var(--picWidth));
    height: var(--picHeight);
    position: absolute;
    right: 0px;
    animation: mright 30s linear infinite;
}

#picBlk0 img {
    width: var(--picWidth);
    height: var(--picHeight);
    float: left;margin-left:-1px;
}

#oBlk0 {
    width: 1200px;
    height: var(--picHeight);
    overflow: hidden;
    position: relative;
    margin: 0 0 0 calc(50% - 681px);
    box-shadow: 4px 4px 10px black;
    --picWidth: 794px;
    --picHeight:530px;
}

@keyframes mright {
    to {
   right: calc(-2 * var(--picWidth));
    }
}

#picBlk0 img:nth-child(even)        {
   transform: scaleX(-1);
}
</style>
<div id="oBlk0">
<div id="picBlk0">
    <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
</div>
</div>

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

难难这个效果特棒，流畅，图片无缝链接完美{:4_199:}

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

起个网名好难 发表于 2024-4-6 12:33


感谢难难还分享了源码{:4_187:}

起个网名好难 发表于 2024-4-6 22:30

小辣椒 发表于 2024-4-6 22:26
难难这个效果特棒，流畅，图片无缝链接完美

https://f6.rednet.cn/data/attachment/forum/201811/22/105121xcxwfbnfx11cwxxd.gif

起个网名好难 发表于 2024-4-6 22:35

小辣椒 发表于 2024-4-6 22:27
感谢难难还分享了源码

多张拼接的长卷（图）也是一样的做法。

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

起个网名好难 发表于 2024-4-6 22:35
多张拼接的长卷（图）也是一样的做法。

看了代码难难你很厉害哦{:4_199:}

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

起个网名好难 发表于 2024-4-6 19:33
只要2倍图片宽度大于框的宽度就行。

这个对于有喜欢的比较小的图图来说，特别适合呢。太赞了{:4_199:}

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

起个网名好难 发表于 2024-4-6 19:34


应该谢谢难难又带来这么好的东西才是{:4_187:}

起个网名好难 发表于 2024-4-7 00:33

红影 发表于 2024-4-6 23:59
这个对于有喜欢的比较小的图图来说，特别适合呢。太赞了

图片尺寸无所谓大小都行的。

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

起个网名好难 发表于 2024-4-6 21:33
本帖最后由 起个网名好难 于 2024-4-7 00:31 编辑 向右滚动

#picBlk0 {


这下完美了。{:4_190:}

起个网名好难 发表于 2024-4-7 07:40

樵歌 发表于 2024-4-7 07:32
这下完美了。

是用手机看吧，用电脑应该是没什么问题的。昨天晚上躺在床上用手机看果然有条缝隙{:5_102:}

谢谢指正！

樵歌 发表于 2024-4-7 09:47

起个网名好难 发表于 2024-4-7 07:40
是用手机看吧，用电脑应该是没什么问题的。昨天晚上躺在床上用手机看果然有条缝隙

谢谢指正 ...

你和马大师有得一拼，都是大师级高手。{:4_190:}

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

          老师你好，你的这个代码我到离退休论坛试验没有成功，不知啥原因？

起个网名好难 发表于 2024-4-7 10:51

樵歌 发表于 2024-4-7 09:47
你和马大师有得一拼，都是大师级高手。

不敢， 就一业余爱好者。

起个网名好难 发表于 2024-4-7 10:52

老谟深虑 发表于 2024-4-7 10:10
老师你好，你的这个代码我到离退休论坛试验没有成功，不知啥原因？

是的，那里真的很奇怪，

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

起个网名好难 发表于 2024-4-7 10:52
是的，那里真的很奇怪，

         希望老师到那里去研究研究。

红影 发表于 2024-4-7 12:12

起个网名好难 发表于 2024-4-7 00:33
图片尺寸无所谓大小都行的。

嗯嗯，适用性很不错{:4_199:}

起个网名好难 发表于 2024-4-7 12:28

老谟深虑 发表于 2024-4-7 11:25
希望老师到那里去研究研究。

已经投降放弃了{:5_102:}
页: 1 [2] 3
查看完整版本: CSS 实现无缝滚动