今天用css做一个简单的轮播图练习，效果如图
点击切换图片
这里也定义了自动切换的动画aa1 可以实现自动的动画，这里注释掉了，可以打开实现自动切换，并注释掉三个按钮label。
同时打开动画和按钮的切换会有点小问题，大概是我的方法不对，也请大佬指点。
这里采用的类似雪碧图的方法，隐藏溢出的内容通过点击修改位置达到切换图片的效果。
源码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {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;}}</style></head><body><div class="out"><input type="radio" name="picture" id="button1" checked><label for="button1"></label><input type="radio" name="picture" id="button2"><label for="button2"></label><input type="radio" name="picture" id="button3"><label for="button3"></label><ul><li></li><li></li><li></li></ul></div></body></html>
