css3简单幻灯片 |css 空字符

在CSS3中，实现幻灯片可以使用<input>元素的checked状态来控制图片的显示与隐藏。

HTML代码如下：
<div class="slider">
<input type="radio" name="slider" id="slide1" checked/>
<input type="radio" name="slider" id="slide2"/>
<input type="radio" name="slider" id="slide3"/>
<div class="slides">
<div class="slide1">第一张图片</div>
<div class="slide2">第二张图片</div>
<div class="slide3">第三张图片</div>
</div>
<div class="navigation">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
</div>
CSS代码如下：
.slider {
position: relative;
height: 300px;
width: 500px;
margin: 0 auto;
}
.slides {
position: absolute;
width: 100%;
height: 100%;
}
.slides div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.navigation label {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
background-color: #ccc;
transition: background-color 0.3s ease-in-out;
}
.navigation label:hover {
background-color: #555;
}
#slide1:checked ~ .slides .slide1,
#slide2:checked ~ .slides .slide2,
#slide3:checked ~ .slides .slide3 {
opacity: 1;
}

在这里，#slide1:checked ~ .slides .slide1选择器表示当slide1被选中时，slide1元素的兄弟元素中具有slides类名的元素下具有类名为slide1的元素将不再隐藏，而是显示。

以上代码即是一个基本的CSS3幻灯片效果，通过修改样式可以实现更加炫酷的效果。