纯css简单轮播图练习/自动手动切换（附粘贴源码）

 今天用css做一个简单的轮播图练习，效果如图

点击切换图片

这里也定义了自动切换的动画aa1   可以实现自动的动画，这里注释掉了，可以打开实现自动切换，并注释掉三个按钮label。

同时打开动画和按钮的切换会有点小问题，大概是我的方法不对，也请大佬指点。

这里采用的类似雪碧图的方法，隐藏溢出的内容通过点击修改位置达到切换图片的效果。

 源码：

                     * {      margin: 0;      padding: 0;    }    body{ background: linear-gradient(pink, rgb(216, 102, 102) ,rgb(205, 224, 98));  }   .out{margin: 50vh auto;width: 800px;overflow: hidden;position: relative;/* border: px solid red; */     } ul{     list-style: none;     width: 2400px;     background-color: aqua;/* animation: aa1 infinite 2s steps(3); */     } input{     display: none; } ul>li{     background-color: bisque;     width: 800px;     height: 400px; line-height: 400px;     text-align: center;     float: left;      } ul li:nth-child(1){     background-color: aquamarine;     background: url(./img/城市.jpg) no-repeat;     background-size: cover; } ul li:nth-child(2){     background-color: rgb(199, 197, 55);     background: url(./img/beij.jpg) no-repeat;     background-size: cover; } ul li:nth-child(3){     background-color: rgb(17, 216, 50);     background: url(./img/prac.jpg) no-repeat;     background-size: cover; } .out label{     border-radius: 50%;     position: absolute;     background-color: aliceblue;     width: 20px;     height: 20px;     top: 80%;     cursor: pointer;     } .out label[for="button1"]{     left: 35%; } .out label[for="button2"]{     left: 45%; } .out label[for="button3"]{     left: 55%; } .out input#button1:checked~ul{     margin-left: 0px;     transition:  1s; } .out input#button2:checked~ul{     margin-left: -800px;     transition:  1s; } .out input#button3:checked~ul{     margin-left: -1600px;     transition: 1s; } .out label:hover{     border: 1px solid rgb(231, 135, 135);     box-shadow: rgb(17, 216, 50);      } .out input#button1:checked~label[for="button1"]{     background-color: rgb(217, 231, 20); } .out input#button2:checked~label[for="button2"]{     background-color: rgb(220, 235, 20); } .out input#button3:checked~label[for="button3"]{     background-color: rgb(229, 233, 27); }     @keyframes aa1{ to{  margin-left: -2400px;     } }