HTML5无限滚动

最新推荐文章于 2021-10-18 11:15:22 发布

methun

最新推荐文章于 2021-10-18 11:15:22 发布

阅读量1.5k

点赞数

分类专栏： CSS3 文章标签： html5 CSS3 无限滚动 animation

CSS3 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        div{
            width: 600px;
            height: 188px;
            border: 1px solid #000;
            margin: 100px auto;
            background-color: blue;
            overflow: hidden;
        }
        ul{
            width: 2000px;
            height: 188px;
            background-color: black;
            animation:change 10s linear 0s infinite normal;
        }
      ul  li{
          width: 300px;
          height: 188px;
          list-style: none;
          float: left;
          border: 1px solid #000000;
          box-sizing: border-box;
        }
        @keyframes change{
            from{
                margin-left: 0px;
            }to{
            margin-left: -1200px;
                         }
        }
        ul:hover{
  animation-play-state:paused;
        }
        ul:hover li{
            opacity: 0.5;
        }
        ul li:hover{
 opacity: 1;;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><img src="images-100/banner1.png" alt=""></li>
        <li><img src="images-100/banner2.jpg" alt=""></li>
        <li><img src="images-100/banner3.jpg" alt=""></li>
        <li><img src="images-100/banner4.jpg" alt=""></li>
        <li><img src="images-100/banner1.png" alt=""></li>
        <li><img src="images-100/banner2.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>