CSS - 动画走马灯实现

编程知识更新时间:2023-04-06 07:21:30

实现效果

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
</head>
<style>

    * {
        margin: 0 auto;
        padding: 0%;
    }

    .box {
        width: 300px;
        height: 100px;
        border: 1px solid #000;
        overflow: hidden;
    }

    .box ul {
        width: 900px;
        animation: run 4s linear infinite alternate;
    }
    .box li {
        float: left;
        width: 100px;
        height: 100px;
        list-style: none;
    }

    .box li:nth-child(2n) {
        background-color: pink;
    }

    .box li:nth-child(2n + 1) {
        background-color: red;
    }


    @keyframes run {
        to {
            transform: translateX(-600px);
        }
    }

</style>
<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    
</script>
</html>