<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="card">
<input type="radio" name="select" id="slide_1" checked>
<input type="radio" name="select" id="slide_2">
<input type="radio" name="select" id="slide_3">
<input type="radio" name="select" id="slide_4">
<input type="radio" name="select" id="slide_5">
<div class="slider">
<label for="slide_1" class="slide slide_1"></label>
<label for="slide_2" class="slide slide_2"></label>
<label for="slide_3" class="slide slide_3"></label>
<label for="slide_4" class="slide slide_4"></label>
<label for="slide_5" class="slide slide_5"></label>
</div>
<div class="inner_part">
<label for="slideImg" class="img">
<img class="img_1" src="http://p6.qhimg.com/bdm/1024_768_85/t01f06956f127bfd1c8.jpg">
</label>
</div>
<div class="inner_part">
<label for="slideImg" class="img">
<img class="img_2" src="http://p5.qhimg.com/bdm/1024_768_85/t017a2749af9ea8c00e.jpg">
</label>
</div>
<div class="inner_part">
<label for="slideImg" class="img">
<img class="img_3" src="http://p1.qhimg.com/bdm/1024_768_85/t01434cf14f1923aac2.jpg">
</label>
</div>
<div class="inner_part">
<label for="slideImg" class="img">
<img class="img_4" src="http://p9.qhimg.com/bdm/1024_768_85/t01678c7fa1f713fb19.jpg">
</label>
</div>
<div class="inner_part">
<label for="slideImg" class="img">
<img class="img_5" src="http://p4.qhimg.com/bdm/1024_768_85/t014fff6ed91935cd74.jpg">
</label>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #cecece;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
position: absolute;
height: 768px;
width: 100%;
max-width: 1024px;
margin: auto;
border-radius: 10px;
}
.card .inner_part {
display: flex;
align-items: center;
justify-content: center;
height: 768px;
position: absolute;
}
.inner_part .img {
height: 768px;
width: 1024px;
overflow: hidden;
flex-shrink: 0;
border-radius: 10px;
box-shadow: inset 20px 16px 20px 0px rgb(0 0 0 / 21%);;
}
.img img {
opacity: 0;
transition: .6s;
}
#slide_1:checked ~ .inner_part .img_1,
#slide_2:checked ~ .inner_part .img_2,
#slide_3:checked ~ .inner_part .img_3,
#slide_4:checked ~ .inner_part .img_4,
#slide_5:checked ~ .inner_part .img_5 {
opacity: 1;
transition-delay: 0.2s;
}
.slider {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
#slideImg:checked ~ .slider {
display: none;
}
.slider .slide {
position: relative;
height: 10px;
width: 50px;
background: #d9d9d9;
border-radius: 5px;
display: inline-flex;
margin: 0 3px;
cursor: pointer;
}
input {
display: none;
}