CSS模仿⾕歌浏览器tab标签栏效果css ⽔平很差，还得多练，这⾥分享给⼤家⾕歌标签栏的模仿效果
效果
普通效果
压缩到最⼩时
⿏标移动效果
源码
<template>
<div class="tabs">
<div class="tab "media="tab":class="active"@mouseover="active='active'"@mouseleave="active=''">
<div><img v-if="icon"class="icon":src="icon"/></div>
<div class="title">{{title}}</div>
<div class="closer">
<a-icon v-show="active=='active'"type="close"class="closer-icon"/>
css特效文字</div>
</div>
</div>
</template>
<script>
export default{
props:{
props:{
title: String,
icon: String,
},
data(){
return{
active:'',
}
},
methods:{},
mounted(){
},
}
</script>
<style scoped>
.tabs{
line-height: 34px;
height: 34px;
}
.tab{
display: flex;
flex-wrap: nowrap;
justify-content: start;
min-width: 10px;
overflow:hidden;
line-height: 34px;
height: 34px;
border: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 0px;
border-radius: 2px;
background-color: ghostwhite;
-webkit-app-region: no-drag;
}
@media screen and (max-width: 500px){ .tabs{
min-width: 5%;
}
.
tabs .title{
width: 0px;
min-width: 0px;
}
}
@media screen and (min-width: 500px){ .tabs .tab{
min-width: 100px;
}
.tabs .title{
}
}
/
* 悬停样式 */
.tab:hover{
background-color: white;
}
/* 当前的tab */
.tab.active{
background-color: white;
}
.icon{
min-width: 20px;
margin: 0px 6px 6px 6px ;
width: 20px;
border-radius: 4px;
}
.title{
/* transform: translate(10px,0); */
line-height: 34px;
cursor: default;
min-width: 0px;
width: 100%;
/* 禁⽌⽂字复制 */
-webkit-user-select: none;
-
moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.closer{
display: flex;
justify-content: flex-end;
background:linear-gradient(to left, ghostwhite, transparent); width: 20px;
}
.tab.active .closer-icon{
transform:translateX(-5px);
margin-top: 5px;
padding: 3px;
height: 20px;
width: 20px;
justify-content: flex-end;
border-radius: 50%;
}
.tab.active .closer-icon:hover{
background-color:rgba(0, 0, 0, 0.1);
}
</style>