css系列----纯 css 实现轮播图(自动)

╰+攻爆jí腚メ 2023-07-17 07:23 30阅读 0赞

# 3、纯 css 实现轮播图(自动) #

实现原理：利用 css3 中 动画和 overflow:hidden 实现

/* 容器大小 */
    .container { 
      height: 300px;
      width: 800px;
      overflow: hidden;
    }
    
    /* .wrap */
    .wrap { 
      position: relative;
      left: 0px;
      width: 2400px;
      animation: animateImg ease 5s infinite normal;
    }
    
    /* 图片大小 */
    .wrap img { 
      width: 800px;
      float: left;
      height: 300px;
      display: block;
    }
    
    /* 动画 */
    @keyframes animateImg { 
      0% { 
        left: 0px;
      }
      20% { 
        left: -0px;
      }
      40% { 
        left: -800px;
      }
      60% { 
        left: -800px;
      }
      80% { 
        left: -1600px;
      }
      100% { 
        left: -1600px;
      }
    }

效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]

--------------------

查看更多  
[博客][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]: /images/20230528/82ab3fa24e41439ea4930b46347c2695.png
[Link 1]: https://s2265681.github.io/Guide/MCSS/3%E3%80%81Slideshow2.html