我們平時做輪播圖的時候都是通過獲取卡片位置進行tansform偏移進行卡片切換，今天只用css就能實現輪播效果：

1.使用錨點定位定位到具體卡片

2.使用overflow，hidden隱藏其他卡片，其實hidden屬性不是把多餘的子元素剪下了，僅僅是隱藏了，具體效果圖如下：

html程式碼如下：

<div class="box">
    <div class="list" id="one">1</div>
    <div class="list" id="two">2</div>
    <div class="list"
 
 id="three">3</div>
    <div class="list" id="four">4</div>
</div>
<div class="link">
    <a class="click" href="#one">1</a>
    <a class="click" href="#two">2</a>
    <a class="click" href="#three">3</a>
    <a class="click" href="#four"
 
>4</a>
</div>

css程式碼如下：

.box {
    width: 20em;
    height: 10em;
    border: 1px solid #ddd;
    overflow: hidden;
}
.list {
    line-height: 10em;
    background: #ddd;
    text-align: center;
}

具體演示效果可以在下面連結檢視（建議去看看）：

https://demo.cssworld.cn/6/4-2.php#one