醉美水芙蓉 发表于 2026-10-17 20:05:17

【漫步大图特效】古寺禅光/图图左右横走CSS

<div style="position:absolute;left:2px;top:2px;color:red;animation:pendulum 1s ease-in-out infinite;"><font size="4">图宽20000长，鼠标放图右边向右自动走动，<br>鼠标放图中间图停止走动。鼠标移开图，图向左自动循环走动。</font></div>

<style>
@keyframes pendulum{
0%{transform:translateX(-4px);}
50%{transform:translateX(4px);}
100%{transform:translateX(-4px);}
}
</style>
</div>

<style>
#mydiv {
    margin: 160px 0 130px calc(50% - 931px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 500px;
    background: lightblue url('https://644220.freep.cn/644220/6/565.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.marquee-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}
.marquee-track {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    width: max-content;
    animation: marqueeScroll 200s linear infinite;
}
.marquee-img {
    height: 100%;
    width: auto;
    flex-shrink: 0;
    display: block;
}
.hover-ctrl {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 998;
}
.ctrl-left { left: 0; width: 33.333%; }
.ctrl-mid { left: 33.333%; width: 33.333%; }
.ctrl-right { right: 0; width: 33.333%; }

.ctrl-mid:hover ~ .marquee-wrap .marquee-track { animation-play-state: paused; }
.ctrl-right:hover ~ .marquee-wrap .marquee-track { animation-direction: reverse; }

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
</style>

<div id="mydiv">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33742843" autoplay loop></audio>
   
    <div class="hover-ctrl ctrl-left"></div>
    <div class="hover-ctrl ctrl-mid"></div>
    <div class="hover-ctrl ctrl-right"></div>

    <div class="marquee-wrap">
      <div class="marquee-track">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133726ud1j1zi6qi6hbb6t.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133726tc8kr9z8plckekzl.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133726wv51eclyvw1evjem.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727g5wwsjy977bjw925.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727zwwf3mamr6cmt3rw.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727bkdw91rr1zx4foh4.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727qqs35vv517yyvmzl.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727zfff44ofqf3s332c.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728w1yn3flalnf6sx7x.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728lvdzme9jii89lvzt.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728dgsk1fffhhbkhwaa.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728d5oj4vj24o2kbovb.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728o7gu7oogg5ucs8un.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729n565he7lzhp8pejl.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729oz0mcnkqm3y0teml.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729aaquadkhd0b2kvjd.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729s1e0rmea0ex62unn.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729i1pylzzq3y8pnppa.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729n7hyo9tyntr9lyso.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133730hbdjybvitrk6jkyk.jpg">

            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133726ud1j1zi6qi6hbb6t.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133726tc8kr9z8plckekzl.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133726wv51eclyvw1evjem.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727g5wwsjy977bjw925.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727zwwf3mamr6cmt3rw.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727bkdw91rr1zx4foh4.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727qqs35vv517yyvmzl.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133727zfff44ofqf3s332c.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728w1yn3flalnf6sx7x.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728lvdzme9jii89lvzt.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728dgsk1fffhhbkhwaa.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728d5oj4vj24o2kbovb.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133728o7gu7oogg5ucs8un.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729n565he7lzhp8pejl.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729oz0mcnkqm3y0teml.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729aaquadkhd0b2kvjd.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729s1e0rmea0ex62unn.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729i1pylzzq3y8pnppa.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133729n7hyo9tyntr9lyso.jpg">
            <img class="marquee-img" src="https://www.yhyhlt.com/data/attachment/forum/202609/24/133730hbdjybvitrk6jkyk.jpg">

      </div>
    </div>
</div>











</td></tr></table>

klxf 发表于 2026-10-18 14:18:06

好大的图，控制顺畅，效果挺好，谢谢分享

醉美水芙蓉 发表于 2026-10-18 16:34:32

klxf 发表于 2026-10-18 14:18
好大的图，控制顺畅，效果挺好，谢谢分享

谢谢友友光临！
页: [1]
查看完整版本: 【漫步大图特效】古寺禅光/图图左右横走CSS