CSS中的滑動門技術怎么用

滑動門技術是一種用于創建按鈕、鏈接和導航菜單等元素的CSS技術，它可以實現圖像在不同狀態下的平滑切換效果。

以下是使用滑動門技術的步驟：

1. 創建HTML結構：

<button class="sliding-door">按鈕</button>

2. 添加CSS樣式：

.sliding-door {
display: inline-block;
position: relative;
padding: 10px 20px;
background-color: #ccc;
border: none;
outline: none;
cursor: pointer;
}
.sliding-door:before,
.sliding-door:after {
content: '';
position: absolute;
}
.sliding-door:before {
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #f00;
transition: width 0.3s ease;
}
.sliding-door:after {
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #00f;
transition: width 0.3s ease;
}
.sliding-door:hover:before {
width: 100%;
}
.sliding-door:hover:after {
width: 0;
}

在上面的代碼中，我們給按鈕元素添加了一個class為"sliding-door"，并使用:before和:after偽元素來創建兩個背景色塊。通過:hover偽類來實現鼠標懸停時的滑動效果。

3. 最終效果：

當鼠標懸停在按鈕上時，左邊的背景色塊會從左向右滑動，右邊的背景色塊會從右向左滑動，從而實現滑動門效果。

注意：滑動門技術需要一些基礎的CSS知識和理解，上面的代碼只是一個簡單的示例，實際應用中可能需要根據具體需求進行修改和調整。