无缝滚动

最新推荐文章于 2024-06-14 14:03:09 发布

人道烘炉_L

最新推荐文章于 2024-06-14 14:03:09 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/My_emotions_L/article/details/78444113

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS3 动画</title>
   <style>
       body {
           margin: 0;
           padding: 0;
           background-color: #F7F7F7;
       }

       .view {
           width: 882px;
           height: 86px;
           margin: 200px auto;
           position: relative;
           overflow: hidden;
           border: 3px solid red;
       }

       ul {
           width: 1764px;
           height: 86px;
           padding: 0;
           margin: 0;
           list-style: none;
           position: absolute;
           left: 0;
           animation: move 7s linear infinite;
       }

       li {
           float: left;
           font-size: 0;
       }

       @keyframes move {
           0%{

           }

           100%{
               transform:translateX(-882px)
           }
       }
       .view:hover ul{
           /*
               animation-paly-state:
               running:播放
               paused: 暂停
           */
           /* 鼠标移动的轮播图时动画停止*/
           animation-play-state: paused;
       }

   </style>
</head>
<body>
   <div class="view">
       <ul>
           <li><img src="./images/1.jpg" alt=""></li>
           <li><img src="./images/2.jpg" alt=""></li>
           <li><img src="./images/3.jpg" alt=""></li>
           <li><img src="./images/4.jpg" alt=""></li>
           <li><img src="./images/5.jpg" alt=""></li>
           <li><img src="./images/6.jpg" alt=""></li>
           <li><img src="./images/7.jpg" alt=""></li>
           <li><img src="./images/1.jpg" alt=""></li>
           <li><img src="./images/2.jpg" alt=""></li>
           <li><img src="./images/3.jpg" alt=""></li>
           <li><img src="./images/4.jpg" alt=""></li>
           <li><img src="./images/5.jpg" alt=""></li>
           <li><img src="./images/6.jpg" alt=""></li>
           <li><img src="./images/7.jpg" alt=""></li>
       </ul>
   </div>
</body>
</html>