css动画做轮播图

最新推荐文章于 2023-11-12 18:23:46 发布

衔钰

最新推荐文章于 2023-11-12 18:23:46 发布

阅读量129

点赞数 3

分类专栏： css基础知识

本文链接：https://blog.csdn.net/luzixi/article/details/125860639

版权

css 前端 html 青少年编程

css基础知识专栏收录该内容

7 篇文章 1 订阅

订阅专栏

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        overflow: hidden;
        width: 600px;
        height: 150px;
        border: 3px solid #000;
        margin: 100px auto;
      
    }
    .box ul{
        list-style: none;
        width: 2000px;
        animation: run 15s linear infinite;
    }
    .box:hover ul{
        animation-play-state: paused;
    }
    .box li{
      float: left;
    }
    .box li a{
        text-decoration: none;
    }
    .box li a img{
        width: 200px;
        height: 150px;
    }
    @keyframes run {
        0%{
            transform: translate(0,0);
        }
        100%{
           transform: translate(-1400px,0);
        }
    }
</style>
<body>
    <div class="box">
        <ul>
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li><a href="#"><img src="./images/6.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li><a href="#"><img src="./images/7.jpg" alt=""></a></li>
        </ul>
  <!-- 做一个视觉差,补前面三张图片 -->
  <ul>
    <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
</ul>
<ul>
    <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
</ul>
<ul>
    <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
</ul>
    </div>
</body>
</html>