漂亮的TAB标签切换

最新推荐文章于 2024-04-20 20:27:59 发布

江湖人称波哥

最新推荐文章于 2024-04-20 20:27:59 发布

阅读量527

点赞数

分类专栏：前端文章标签： tabs 前端 html

本文链接：https://blog.csdn.net/yuanbo_520/article/details/131976389

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

样式

在这里插入图片描述

CSS样式

.min-tab-box{
    position: relative;
    width: 100%;
    text-align: initial;
    padding-left: 550px;
    top: 10px;
}
.min-tab-item{
     position: absolute;
     --transform: perspective(75em) rotateX(0deg) rotateZ(-0deg) translate(calc(var(--x) * 87%), calc(var(--y) * 86.67%)) scale(1.145);
     transform: var(--transform);
     transition: transform .25s ease-out;
     clip-path: polygon(0% 100%,75% 100%,100% 0%,75% 0%,25% 0%);
     background: #B452CD;
     padding: 0 40px;
     color: #cccccc;
     cursor: pointer;
 }
 .min-tab-active,.min-tab-item:hover{
     transform: var(--transform) translateZ(10px) scale(1.1);
     background: #E066FF;
     color: #fff;
     font-weight: bold;
     z-index: 999;
 }

HTML

<div class="min-tab-box">
    <span class="min-tab-item" :class="dateType==='0'?'min-tab-active':''" @click="dateType='0'" :style="{'--x': 0, '--y': 0}">
        周榜
    </span>
    <span class="min-tab-item" :class="dateType==='1'?'min-tab-active':''"  @click="dateType='1'" :style="{'--x': 1, '--y': 0}">
        月榜
    </span>
    <span class="min-tab-item" :class="dateType==='2'?'min-tab-active':''"  @click="dateType='2'" :style="{'--x': 2, '--y': 0}">
        年榜
    </span>
    <span class="min-tab-item" :class="dateType==='5'?'min-tab-active':''"  @click="dateType='5'" :style="{'--x': 3, '--y': 0}">
        任意
    </span>
    <span class="min-tab-item" :class="dateType==='-1'?'min-tab-active':''"  @click="dateType='-1'" :style="{'--x': 4, '--y': 0}">
        总榜
    </span>
</div>