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

CSS 实现无缝滚动

本帖最后由 起个网名好难 于 2024-4-10 15:09 编辑 <br /><br /><style>
#picBlk {
    width: calc(4 * var(--picWidth));
    height: var(--picHeight);
    position: absolute;
    left: 0px;
    animation: mleft 30s linear infinite;
}

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

#oBlk {
    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 mleft {
    to {
      left: calc(-2 * var(--picWidth));
    }
}

#picBlk img:nth-child(even)        {
   transform: scaleX(-1);
}
</style>
<div id="oBlk">
<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>
</div>

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

本帖最后由 起个网名好难 于 2024-4-6 14:01 编辑

<style>
#picBlk {
    width: calc(4 * var(--picWidth));
    height: var(--picHeight);
    position: absolute;
    left: 0px;
    animation: mleft 30s linear infinite;
}

#picBlk img {
    width: var(--picWidth);
    height: var(--picHeight);
    float: left;
}

#oBlk {
    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 mleft {
    to {
      left: calc(-2 * var(--picWidth));
    }
}

#picBlk img:nth-child(even) {
    transform: scaleX(-1);
}
</style>
<div id="oBlk">
<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>
</div>

亦是金 发表于 2024-4-6 12:56

好看的无缝滚动背景！欣赏收藏，准备学习套用一个！{:4_180:}

樵歌 发表于 2024-4-6 14:14

有一白线。

世外桃源 发表于 2024-4-6 15:23

漂亮哦{:4_199:}

世外桃源 发表于 2024-4-6 15:23

这个图片选的好{:4_199:}

世外桃源 发表于 2024-4-6 15:24

老师好制作，很流畅的

起个网名好难 发表于 2024-4-6 15:27

亦是金 发表于 2024-4-6 12:56
好看的无缝滚动背景！欣赏收藏，准备学习套用一个！

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

起个网名好难 发表于 2024-4-6 15:27

世外桃源 发表于 2024-4-6 15:23
漂亮哦

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

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

世外桃源 发表于 2024-4-6 15:23
这个图片选的好

网上找的，不是太满意。

起个网名好难 发表于 2024-4-6 15:31

樵歌 发表于 2024-4-6 14:14
有一白线。

眼力真棒{:5_116:}

小水瓢 发表于 2024-4-6 16:28

衔接处能看到白线，但是，选的这张图特别好，接起来的时候，有一个房子正好是半个房子合成了整个的。{:5_106:}

小水瓢 发表于 2024-4-6 16:29

厉害，一个单个的图能合成大长卷{:5_116:}

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

小水瓢 发表于 2024-4-6 16:28
衔接处能看到白线，但是，选的这张图特别好，接起来的时候，有一个房子正好是半个房子合成了整个的。{:5_10 ...

眼力真棒{:5_116:}

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

小水瓢 发表于 2024-4-6 16:29
厉害，一个单个的图能合成大长卷

网上找的图，不是很理想的。

红影 发表于 2024-4-6 18:55

这个制作图片可以不大，却可以比较大地显示。又是一个新的背景图滚动代码{:4_187:}

红影 发表于 2024-4-6 18:57

难难厉害，这个制作很赞{:4_187:}

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

红影 发表于 2024-4-6 18:55
这个制作图片可以不大，却可以比较大地显示。又是一个新的背景图滚动代码

只要2倍图片宽度大于框的宽度就行。

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

红影 发表于 2024-4-6 18:57
难难厉害，这个制作很赞

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

樵歌 发表于 2024-4-6 20:59

起个网名好难 发表于 2024-4-6 15:31
眼力真棒

选择的图非常好。怎么消去那线线。
页: [1] 2 3
查看完整版本: CSS 实现无缝滚动