[分享]css3怎么点圆圈切换图片

css3是网页设计中不可或缺的一部分，它可以使网页更加美观、生动。其中，点圆圈切换图片是一个常见的特效，接下来我们就来学习如何使用css3实现它。 首先，在html中，我们需要使用img标签来插入我们...

css3是网页设计中不可或缺的一部分，它可以使网页更加美观、生动。其中，点圆圈切换图片是一个常见的特效，接下来我们就来学习如何使用css3实现它。
首先，在html中，我们需要使用img标签来插入我们需要展示的图片。然后，我们给每张插入的图片设置一个class，来方便我们在css中对它们进行控制。例如：

  <div>
            <img class="image-1" src="图片链接1">
            <img class="image-2" src="图片链接2">
            <img class="image-3" src="图片链接3">
        </div> 

然后，我们在css中对这些图片进行控制。使用css3的checkbox伪类来实现点圆圈的控制效果。例如：

  input[type="checkbox"] {
            display: none;
        }
<br>
        .image-1 {
            position: absolute;
            opacity: 0;
            transition: all .5s;
        }
<br>
        .image-2 {
            position: absolute;
            opacity: 0;
            transition: all .5s;
        }
<br>
        .image-3 {
            position: absolute;
            opacity: 0;
            transition: all .5s;
        }
<br>
        #slider-1:checked ~ .image-1 {
            opacity: 1;
            z-index: 999;
        }
<br>
        #slider-1:checked ~ .image-2 {
            opacity: 0;
            z-index:998;
        }
<br>
        #slider-1:checked ~ .image-3 {
            opacity: 0;
            z-index:998;
        }
<br>
        #slider-2:checked ~ .image-1 {
            opacity: 0;
            z-index: 998;
        }
<br>
        #slider-2:checked ~ .image-2 {
            opacity: 1;
            z-index: 999;
        }
<br>
        #slider-2:checked ~ .image-3 {
            opacity: 0;
            z-index: 998;
        }
<br>
        #slider-3:checked ~ .image-1 {
            opacity: 0;
            z-index: 998;
        }
<br>
        #slider-3:checked ~ .image-2 {
            opacity: 0;
            z-index: 998;
        }
<br>
        #slider-3:checked ~ .image-3 {
            opacity: 1;
            z-index: 999;
        } 

最后，我们在html中加入checkbox输入框和label标签，使它们产生联系，从而实现图片的切换。例如：

  <div>
            <input id="slider-1" name="slider" type="checkbox">
            <input id="slider-2" name="slider" type="checkbox">
            <input id="slider-3" name="slider" type="checkbox">
            <label for="slider-1"></label>
            <label for="slider-2"></label>
            <label for="slider-3"></label>
        </div> 

这样，我们就成功地实现了点圆圈切换图片的效果。请试着在自己的网页中也实现它吧！