<!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
1.8k 声望166 粉丝

写作是为了更好的思考