Animation 实现轮播图

2024年4月25日 157次阅读 来源: wupengyu 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div {
        width: 300px;
        margin: 0 auto;
        overflow: hidden;
      }
      ul {
        width: 1200px;
        margin: 0;
        padding: 0;
        list-style: none;
        animation: slide 6s linear 2s infinite;
      }
      li {
        list-style-type: none;
        width: 300px;
        height: 100px;
        float: left;
      }
      @keyframes slide {
        0% { transform: translate(0px); }
        25% { transform: translate(-300px); }
        50% { transform: translate(-300px); }
        75% { transform: translate(-600px); }
        100% { transform: translate(-600px); }
      }
    </style>
  </head>
  <body>
    <div>
      <ul id="slide">
        <li style="background-color: blue"></li>
        <li style="background-color: green"></li>
        <li style="background-color: yellow"></li>
      </ul>
    </div>
  </body>
</html>
    原文作者：wupengyu
    原文地址: https://segmentfault.com/a/1190000008283909
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞