无缝轮播图

来源：互联网发布：类似sketch windows 编辑：程序博客网时间：2024/06/11 17:53

<!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>

0 0