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

我们平时做轮播图的时候都是通过获取卡片位置进行tansform偏移进行卡片切换,今天只用css就能实现轮播效果:

1.使用锚点定位定位到具体卡片

2.使用overflow,hidden隐藏其他卡片,其实hidden属性不是把多余的子元素剪切了,仅仅是隐藏了,具体效果图如下:

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

 

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

上一篇:css小知识整理(一)


下一篇:文字一行或几行显示不下