Animation 实现轮播图

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

Animation 实现轮播图

wupengyu

引用和评论

react核心

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

给线条类型的svg图标加上绘制的动画效果