HTML+CSS练习走马灯案例

okstudy

已于 2024-05-31 01:28:25 修改

阅读量15

点赞数 2

分类专栏：前端文章标签： html5 前端 html css css3

于 2024-05-04 20:20:38 首次发布

本文链接：https://blog.csdn.net/okstudy/article/details/138449426

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>

    * {
        padding: 0; 
        margin: 0;
      }
    

        .div{
            width: 600px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            border: 5px solid #000;
           overflow: hidden;
        }


        ul{
            
            width: 600px;
            height: 100px;
            display: flex;
            margin-left: 0;
            animation: draw 4s linear  infinite ;
            background-color: red;
            position: relative;
            
        }

        img{
            display: block;
            width: 200px;
            height: 100px;
            
        }
        li{
            list-style: none;
            width: 200px;
            height: 100px;
            background-color: green;
            
           
        }
        p{
            font-size: larger;
            color: red;
            position: absolute;
            top: 0;
            text-align: center;
            line-height: 50px;
        }
        @keyframes draw {
            from{
                transform: translate(0);
            }
            to{
                transform: translateX(-600px);
            }
        }
        ul:hover{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="div">
        <ul>
            <li><img src="./s.png" alt=""><p>1</p></li>
            <li><img src="./s.png" alt=""><p>2</p></li>
            <li><img src="./s.png" alt=""><p>3</p></li>
            <li><img src="./s.png" alt=""><p>1</p></li>
            <li><img src="./s.png" alt=""><p>2</p></li>
            <li><img src="./s.png" alt=""><p>3</p></li>
            
        </ul>
    </div>
</body>
</html>