CSS3是Web前端開發(fā)中不可或缺的一部分，它能夠?qū)崿F(xiàn)許多設(shè)計效果，其中幻燈片是用處極大的一種效果。

在CSS3中，實現(xiàn)幻燈片可以使用<input>元素的checked狀態(tài)來控制圖片的顯示與隱藏。

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選擇器表示當(dāng)slide1被選中時，slide1元素的兄弟元素中具有slides類名的元素下具有類名為slide1的元素將不再隱藏，而是顯示。

以上代碼即是一個基本的CSS3幻燈片效果，通過修改樣式可以實現(xiàn)更加炫酷的效果。