最近我學習了手機版滑動門的CSS實例，非常有用。下面是我分享的代碼：

//HTML結構
<div class="slider">
<ul>
<li><a href="#">圖片1</a></li>
<li><a href="#">圖片2</a></li>
<li><a href="#">圖片3</a></li>
<li><a href="#">圖片4</a></li>
</ul>
</div>
//CSS樣式
.slider {
overflow: hidden;
}
.slider ul {
list-style: none;
width: 400%;
margin: 0;
padding: 0;
display: flex;
}
.slider ul li {
width: 25%;
float: left;
}
.slider ul li a {
display: block;
height: 100%;
width: 100%;
text-align: center;
font-size: 2rem;
font-weight: bold;
color: #333;
text-decoration: none;
outline: none;
}
.slider ul li:first-child a {
background: #6699cc;
}
.slider ul li:nth-child(2) a {
background: #ff9966;
}
.slider ul li:nth-child(3) a {
background: #99cc99;
}
.slider ul li:last-child a {
background: #ff6666;
}
.slider ul li a:focus {
color: #fff;
}
.slider ul li a:focus:hover {
background: #333;
color: #fff;
}
.slider ul li:focus-within ~ li a {
transform: translateX(-100%);
}
.slider ul li:first-child:focus-within ~ li a {
transform: none;
}

這個CSS實例實現了一個包含四張圖片的滑動門效果。你可以通過滑動手勢或者點擊鏈接來滑動不同的圖片。通過:focus-within來控制當前選擇的圖片，再用transform屬性來移動