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" />
			</div>
		</div>


	</div>
</template>

<script>
	export default {
		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>