css实现简易轮播图

vGuYi

已于 2022-05-21 21:59:14 修改

阅读量209

点赞数 2

文章标签： css css3 前端

于 2022-05-12 20:41:16 首次发布

本文链接：https://blog.csdn.net/vGuYi/article/details/124739175

版权

本文展示了如何利用CSS实现一个无缝滚动的图片轮播效果，包括设置动画名称、时长、延迟时间，以及控制动画循环和方向。HTML结构包含一个包含多个图片链接的列表，CSS部分通过关键帧动画`@keyframes`定义图片平移，同时在鼠标悬停时暂停动画。该效果适用于前端开发中的图片展示场景。

摘要由CSDN通过智能技术生成

实现如下效果图:

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

html部分

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#"><img src="./images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/4.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/5.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/6.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/7.jpg" alt=""></a>
            </li>
            <!-- 增加前三个图实现无缝链接 -->
            <li>
                <a href="#"><img src="./images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/3.jpg" alt=""></a>
            </li>
        </ul>
    </div>
</body>

css部分

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

        .box {
            /* 隐藏盒子外的部分 */
            overflow: hidden;
            position: absolute;
            height: 150px;
            width: 600px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 3px solid black;
        }

        .box:hover ul {
            /* 触摸暂停动画 ( 出现小姐姐要赶快暂停(●ˇ∀ˇ●) )*/
            animation-play-state: paused;
        }

        .box ul {
            list-style: none;
            width: 2000px;
            /* 动画匀速且无限循环 */
            animation: move 3s linear infinite;
        }

        .box ul li {
            float: left;
            width: 200px;
            height: 150px;
        }

        .box ul li img {
            width: 200px;
            height: 150px;
        }

        @keyframes move {
            100% {
                /* 移动7个图的距离 */
                transform: translate(-1400px);
            }
        }
    </style>

简单完成