醉美水芙蓉 发表于 2026-8-8 23:43:10

向右滚动的清明上河图

<style>
:root   {
    --w:1296px;
    --h:480px;
}
    #blk {
      width: var(--w);
      height: var(--h);
      position:relative;
      background:
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg") no-repeat calc(0 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/11.jpg") no-repeat calc(-1 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/10.jpg") no-repeat calc(-2 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/9.jpg") no-repeat calc(-3 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/8.jpg") no-repeat calc(-4 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/7.jpg") no-repeat calc(-5 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/6.jpg") no-repeat calc(-6 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/5.jpg") no-repeat calc(-7 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/4.jpg") no-repeat calc(-8 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/3.jpg") no-repeat calc(-9 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/2.jpg") no-repeat calc(-10 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg") no-repeat calc(-11 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg")no-repeat calc(-12 * var(--w)) 0/cover;
      animation: MtoR 160s linear infinite ;
      box-shadow: 6px 6px 12px black;
      margin: 32px auto 40px calc(50% - (var(--w) / 2 + 81px));

      &:hover { animation-play-state: paused; }
    }
    @keyframes MtoR {
      to {
background-position:
calc(12 * var(--w)) 0, calc(11 * var(--w)) 0, calc(10 * var(--w)) 0, calc(9 * var(--w)) 0,
calc(8 * var(--w)) 0, calc(7 * var(--w)) 0, calc(6 * var(--w)) 0, calc(5 * var(--w)) 0,
calc(4 * var(--w)) 0, calc(3 * var(--w)) 0, calc(2 * var(--w)) 0, calc(1 * var(--w)) 0, calc(0 * var(--w)) 0;
}
    }
</style>

<div id="blk"></div>
<audio src="https://upfile.mp3.wf/view.php/60cd00178a8e001f5d8d1f96fa8f9e9b.mp4" loop autoplay/>

klxf 发表于 2026-8-9 22:17:49

漂亮~谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2026-8-9 22:37:50

klxf 发表于 2026-8-9 22:17
漂亮~谢谢醉美管理员精彩分享

谢谢友友光临！
页: [1]
查看完整版本: 向右滚动的清明上河图