css实现暗色聚光灯式导航条导航栏tab切换效果代码-html代码-BFW代码库

css实现暗色聚光灯式导航条导航栏tab切换效果代码

代码语言：html

代码描述：css实现暗色聚光灯式导航条导航栏tab切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>
<style>
.tabbar {
	--icon-active:#275EFE;
	--icon-inactive:#6C7486;
	--icon-hover:#99A3BA;
	--text:#E4ECFA;
	--circle:#E4ECFA;
	--background:#171C28;
	--shadow:rgba(18,22,33,.1);
	border-radius:0 0 12px 12px;
	background:var(--background);
	width:240px;
	height:64px;
	padding:0 12px;
	box-shadow:0 8px 16px var(--shadow);
}
.tabbar >div {
	display:flex;
	height:100%;
	position:relative;
}
.tabbar >div label {
	flex:0 0 33.33%;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	cursor:pointer;
	z-index:1;
}
.tabbar >div label svg,.tabbar >div label span {
	display:block;
	-webkit-backface-visibility:hidden;
	transition:opacity 0.4s ease,color 0.4s ease,-webkit-transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12);
	transition:transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12),opacity 0.4s ease,color 0.4s ease;
	transition:transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12),opacity 0.4s ease,color 0.4s ease,-webkit-transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12);
	-webkit-transform:translateY(var(--y)) scale(var(--s));
	transform:translateY(var(--y)) scale(var(--s));
}
.tabbar >div label svg {
	--y:0;
	--s:.84;
	width:24px;
	height:24px;
	margin:auto;
	color:var(--icon-inactive);
	-webkit-transform-origin:50% 50%;
	transform-origin:50% 50%;
}
.tabbar >div label span {
	--y:-8px;
	--s:.92;
	font-size:10px;
	font-weight:500;
	position:absolute;
	left:0;
	right:0;
	text-align:center;
	bottom:0;
	opacity:0;
	color:var(--text);
	-webkit-transform-origin:50% 0;
	transform-origin:50% 0;
}
.tabbar >div label:hover svg {
	color:var(--icon-hover);
}
.tabbar >div label:active svg {
	--s:.76;
}
.tabbar >div input {
	display:none;
}
.tabbar >div input:nth-of-type(1):checked + label + input + label + input + label + span {
	--x:0;
}
.tabbar >div input:nth-of-type(2):checked + label + input + label + span {
	--x:100%;
}
.tabbar >div input:nth-of-type(3):checked + label + span {
	--x:200%;
}
.tabbar >div input:checked + label svg {
	--y:-24px;
	--s:1;
	color:var(--icon-active);
}
.tabbar >div input:checked + label span {
	--s:1;
	--y:-14px;
	opacity:1;
}
.tabbar >div >span {
	--x:0;
	display:block;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:33.33%;
	transition:-webkit-transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12);
	transition:transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12);
	transition:transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12),-webkit-transform 0.4s cubic-bezier(0.2,0.64,0.48,1.12);
	-webkit-transform:translateX(var(--x));
	transform:translateX(var(--x));
	-webkit-backface-visibility:hidden;
}
.tabbar >div >span:after {
	content:'';
	width:44px;
	height:44px;
	display:block;
	border-radius:50%;
	background:var(--circle);
	position:absolute;
	left:50%;
	top:0;
	box-shadow:0 2px 8px var(--shadow);
	margin:-14px 0 0 -22px;
}
html {
	box-sizing:bor.........完整代码请登录后点击上方下载按钮下载查看