全屏輪播通常是我們網(wǎng)頁中常用的特效之一，現(xiàn)在我們通過CSS代碼來實現(xiàn)一下吧！

html, body {
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
#slider {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background-color: #000;
position: relative;
overflow-x: hidden;
}
.slide {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 2s ease-in-out;
}
.slide.active {
z-index: 1;
opacity: 1;
}
.slide .content {
color: #fff;
font-size: 4rem;
text-align: center;
}
.slide1 {
background-image: url('slide1.jpg');
background-size: cover;
}
.slide2 {
background-image: url('slide2.jpg');
background-size: cover;
}
.slide3 {
background-image: url('slide3.jpg');
background-size: cover;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
cursor: pointer;
}
.arrow.left {
left: 2%;
}
.arrow.right {
right: 2%;
}

到這里為止，我們就成功的實現(xiàn)了一個全屏輪播的效果，自己試試吧！