在前端開發中，我們經常需要使用滑動門實現一些特定的效果。CSS3中有一種很好用的滑動門交互方法，那就是通過div實現。
使用CSS實現滑動門的方法有很多，但最常用的是使用div標簽，給它添加上CSS樣式，然后通過:hover和:focus選擇器實現滑動門的交互效果。
/* CSS代碼如下 */
/* 滑動門的整體樣式 */
.div-slide {
position: relative;
width: 200px;
height: 50px;
overflow: hidden;
}
/* 滑動門的左右兩邊樣式 */
.div-slide span {
position: absolute;
top: 0;
bottom: 0;
line-height: 50px;
text-align: center;
width: 50%;
font-size: 16px;
color: #fff;
z-index: 1;
cursor: pointer;
}
/* 左邊按鈕的樣式 */
.div-slide .left {
left: 0;
background-color: green;
}
/* 右邊按鈕的樣式 */
.div-slide .right {
right: 0;
background-color: red;
}
/* 滑塊的樣式 */
.div-slide .slider {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background-color: #333;
z-index: 0;
transition: left 0.3s ease;
}
/* 鼠標懸停在左邊按鈕上的樣式 */
.div-slide .left:hover ~ .slider,
.div-slide .left:focus ~ .slider {
left: 0;
}
/* 鼠標懸停在右邊按鈕上的樣式 */
.div-slide .right:hover ~ .slider,
.div-slide .right:focus ~ .slider {
left: 50%;
}上面的代碼中，我們首先定義了一個
元素，并賦予它名為“div-slide”的類名，并設置它們的寬度和高度。接下來，我們使用CSS設置了left和right的樣式，即左右兩個按鈕的樣式。
然后，我們定義了滑塊的樣式。在這里，我們將它的寬度設為50%，并將其顏色設置為#333。
最后，在這段CSS樣式的最后，我們設置了hover和focus的選擇器。當鼠標懸停在左邊按鈕上時，滑塊會從左邊滑動到右邊；當鼠標懸停在右邊按鈕上時，滑塊會從右邊滑動到左邊。
通過以上的代碼，我們可以輕松地實現滑動門的交互效果，為網站增添了不少動態的視覺效果。
下一篇css漸變按鈕停效