锚点定位和overflow的选项卡切换效果

我们平时做轮播图的时候都是通过获取卡片位置进行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