原理：通过伪类选择器判断当前选择分页器，再通过~选择器+伪类选择器获取到分页器对应轮播图
html部分
<!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>纯css实现轮播</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="section">
<!-- 分页器开始 -->
<input class="checkbox frst" type="radio" name="slider" checked="" id="slider-1">
<label for="slider-1"></label>
<input class="checkbox scnd" type="radio" name="slider" id="slider-2">
<label for="slider-2"></label>
<input class="checkbox thrd" type="radio" name="slider" id="slider-3">
<label for="slider-3"></label>
<input class="checkbox foth" type="radio" name="slider" id="slider-4">
<label for="slider-4"></label>
<!-- 分页器结束 -->
<!-- 轮播开始 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 轮播结束 -->
</div>
</body>
</html>style.css部分
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.section {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 440px;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
display: none;
}
.checkbox:checked+label,
.checkbox:not(:checked)+label {
cursor: pointer;
display: inline-block;
margin: 0 6px;
width: 50px;
height: 50px;
border: 3px solid #bdc3c7;
background-size: cover;
background-position: center;
box-sizing: border-box;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
background-image: url("https://tva3.sinaimg.cn/large/87c01ec7gy1frmn0empcsj21kw0w0e87.jpg");
animation: border-transform 6s linear infinite alternate forwards;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
.checkbox.scnd+label {
background-image: url("https://tva3.sinaimg.cn/large/0060lm7Tly1ftg6xhyidxj31hc0u0x6p.jpg");
}
.checkbox.thrd+label {
background-image: url("https://tva1.sinaimg.cn/large/87c01ec7gy1frmmz605z4j21kw0w0qvh.jpg");
}
.checkbox.foth+label {
background-image: url("https://tva2.sinaimg.cn/large/0060lm7Tly1ftg6ozby6nj31hc0u01cf.jpg");
}
.checkbox:checked+label {
box-shadow: 0 8px 25px 0 rgba(16, 39, 112, 0.3);
transform: scale(1.3);
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
@keyframes border-transform {
0%,
100% {
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
}
70% {
border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
}
}
ul {
width: 100%;
}
ul li {
position: absolute;
top: 0;
width: 100%;
z-index: 100;
height: 400px;
border: 5px solid #bdc3c7;
background-size: cover;
background-position: center;
background-image: url("https://tva3.sinaimg.cn/large/87c01ec7gy1frmn0empcsj21kw0w0e87.jpg");
border-radius: 50%;
letter-spacing: 2px;
opacity: 0;
pointer-events: none;
box-shadow: 0 8px 25px 0 rgba(16, 39, 112, 0.1);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
ul li:nth-child(2) {
background-image: url("https://tva3.sinaimg.cn/large/0060lm7Tly1ftg6xhyidxj31hc0u0x6p.jpg");
}
ul li:nth-child(3) {
background-image: url("https://tva1.sinaimg.cn/large/87c01ec7gy1frmmz605z4j21kw0w0qvh.jpg");
}
ul li:nth-child(4) {
background-image: url("https://tva2.sinaimg.cn/large/0060lm7Tly1ftg6ozby6nj31hc0u01cf.jpg");
}
/*
~ 同父元素内查询当前元素之后的所有元素
因此html内轮播容器放在分页器后面，再通过定位定到前面
*/
.checkbox.frst:checked~ul li:nth-child(1) {
opacity: 1;
pointer-events: auto;
border-radius: 16px;
}
.checkbox.scnd:checked~ul li:nth-child(2) {
opacity: 1;
pointer-events: auto;
border-radius: 16px;
}
.checkbox.thrd:checked~ul li:nth-child(3) {
opacity: 1;
pointer-events: auto;
border-radius: 16px;
}
.checkbox.foth:checked~ul li:nth-child(4) {
opacity: 1;
pointer-events: auto;
border-radius: 16px;
}
@media (max-width: 767px) {
.section {
padding-top: 330px;
}
ul li {
height: 300px;
}
}
@media (max-width: 575px) {
.section {
padding-top: 220px;
}
ul li {
height: 200px;
}
}