纯CSS实现轮播图

纯CSS实现轮播图

各位小伙伴们，今天我们来学习一下轮播图。轮播图是我们写网页当中经常出现的一个效果，基本上各个网站上都会有这个效果。那么一提到轮播图大家脑子里的第一反应是不是用js来实现呀。

那今天这篇文章呢我们就不按常理出牌，不用js来写轮播图，而是利用纯css实现轮播图，听起来是不是很厉害的样子，纯css竟然能写出轮播图的效果，那么到底应该怎么写呢？接下来废话不多说，上代码。

最后实现的效果：

html代码

<!-- slide是轮播图区域 -->
    <div class="slide">
        <!--  swiper里面放的是图片-->
        <ul class="swiper">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="im