纯css实现轮播图

最新推荐文章于 2025-12-16 15:39:53 发布

原创最新推荐文章于 2025-12-16 15:39:53 发布 · 204 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width:1920px;
        height: 1080px;
        border: black 1px solid;
        margin: 0 auto;
        overflow: hidden;
        background: black;
    }
    ul{
        list-style: none;
        width:calc(1920px*4);
        animation: move 10s linear infinite;
    }
    li{
        float: left;
    }
    @keyframes move {
        from{
            margin-left: 0;
        }
        to{
            margin-left:calc(-1920px*3);
        }
    }

    ul:hover{
        animation-play-state: paused;
    }
    ul:hover li{
        opacity: 0.5;
    }
    ul li:hover{
        opacity:1;
    }
</style>
<body>


<div class="box">
    <ul>
        <li><img src="../img/zyl1.jpg" alt=""></li>
        <li><img src="../img/zyl2.jpg" alt=""></li>
        <li><img src="../img/zyl3.jpg" alt=""></li>
        <li><img src="../img/zyl1.jpg" alt=""></li>
    </ul>
</div>




</body>
</html>

无限滚动，鼠标移上去时滚动暂停，并且除鼠标所在的图片外，其它图片都有蒙板。