css3：图片实现无缝滚动的效果(走马灯)

最新推荐文章于 2024-01-23 11:24:11 发布

奄奄一息的一条咸鱼

最新推荐文章于 2024-01-23 11:24:11 发布

阅读量3.1k

点赞数 4

分类专栏： CSS3笔记文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_46682277/article/details/121979834

版权

CSS3笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    img {
      width: 200px;
    }

    ul {
    /*因为是10张照片，所以ul的宽是2000px*/
      width: 2000px;
      animation: move 10s infinite linear;
    }

    .box {
    /*超出盒子的部分，隐藏*/
      overflow: hidden;
      width: 600px;
      height: 112px;
      border: 5px solid #000;
      margin: 100px auto;
    }

    .box li {
      float: left;
    }

    @keyframes move {
      to {
      /*7张图片正好全部走出盒子，留出来的空白部分，由后面那三张图片当替身补上*/
        transform: translateX(-1400px);
      }
    }

    .box ul:hover {
    /*鼠标经过li后，动画暂停*/
      animation-play-state: paused;
    }
</style>
<body>
  <div class="box">
    <ul>
      <li><img src="./images/1.jpg" alt="" /></li>
      <li><img src="./images/2.jpg" alt="" /></li>
      <li><img src="./images/3.jpg" alt="" /></li>
      <li><img src="./images/4.jpg" alt="" /></li>
      <li><img src="./images/5.jpg" alt="" /></li>
      <li><img src="./images/6.jpg" alt="" /></li>
      <li><img src="./images/7.jpg" alt="" /></li>
      <!--多复制出三张图片当做"替身"-->
      <li><img src="./images/1.jpg" alt="" /></li>
      <li><img src="./images/2.jpg" alt="" /></li>
      <li><img src="./images/3.jpg" alt="" /></li>
    </ul>
  </div>
</body>

奄奄一息的一条咸鱼

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
css3：图片实现无缝滚动的效果(走马灯)

<style> * { padding: 0; margin: 0; } li { list-style: none; } img { width: 200px; } ul { /*因为是10张照片，所以ul的宽是2000px*/ width: 2000px; animation: move 10s infinite linear; }
复制链接

扫一扫