CSS3----无缝滚动

最新推荐文章于 2024-07-16 14:17:50 发布

AsaZyf

最新推荐文章于 2024-07-16 14:17:50 发布

阅读量194

点赞数

文章标签： CSS3 无缝滚动

本文链接：https://blog.csdn.net/AsaZyf/article/details/83112775

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           @-webkit-keyframes domove{
               0%{
                   left: 0;
               }
               100%{
                   left: -500px;
               }
           }

           *{
               margin: 0;
               padding: 0;
           }
           ul li{
               list-style: none;
           }
           .wrap{
               width: 500px;
               height: 100px;
               position: relative;
               margin: 50px auto;
               overflow: hidden;
               background: black;
           }
           .wrap ul {
               position: absolute;
               left: 0;
               top: 0;
               width:200%;
               -webkit-animation: 5s domove infinite linear;
           }
           .wrap ul li{
               width: 98px;
               height: 98px;
               border: 1px solid #fff;
               float: left;
               color: #fff;
           }
           .wrap:hover ul{
               -webkit-animation-play-state: paused;
           }
       </style>
   </head>
   <body>
       <div class="wrap">
           <ul>
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
           </ul>
       </div>
   </body>
</html>