CSS3是網(wǎng)頁設(shè)計中常用的一種樣式語言，它可以為網(wǎng)頁添加各種效果。其中，幻燈片是一個非常常見的設(shè)計元素，讓網(wǎng)頁看起來更加動態(tài)和有趣。下面我們來看看如何使用CSS3來實現(xiàn)幻燈片效果。

html:
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
css:
.slider {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
height: 400px;
position: absolute;
top: 0;
left: 0;
animation: slide 10s infinite;
}
@keyframes slide {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</pre>
首先，我們在HTML中設(shè)置一個div元素，class為slider，內(nèi)部添加若干圖片。在CSS中，我們設(shè)置slider元素的寬度、高度和overflow屬性，讓其能夠包容內(nèi)部的圖片，并且只顯示一張圖片。接著，我們設(shè)置所有圖片的寬度、高度和位置，讓其重疊在一起。最后，使用CSS3中的動畫animation和keyframes來實現(xiàn)幻燈片效果。在這里，我們設(shè)置動畫時長為10秒，效果為循環(huán)播放，每次播放時，顯示一張圖片，其他圖片全部隱藏。這樣，就實現(xiàn)了一個簡單的幻燈片效果。