svg+jquery实现模仿chrome浏览器地址输入栏tab选项卡菜单栏效果代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：svg+jquery实现模仿chrome浏览器地址输入栏tab选项卡菜单栏效果代码

代码标签： svg jquery 模仿 chrome 浏览器地址输入栏 tab 选项卡菜单栏

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

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

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/modern-normalize.min.css">
    <style>
        @charset "UTF-8";
	body {
	display:flex;
	flex-direction:column;
	padding:200px 50px;
	background-color:#EEE
}
body #chrome-bar {
	position:relative;
	top:0;
	display:flex;
	flex-direction:column;
	width:100%;
	border-bottom:1px solid #B6B4B6;
	font-family:"Segoe UI","Roboto",sans-serif
}
body #chrome-bar.windowed {
	top:-9px
}
body #chrome-bar #tab-bar {
	display:flex;
	flex-direction:row;
	height:34px;
	padding-left:8px;
	background-color:#DEE1E6
}
body #chrome-bar #tab-bar.windowed {
	height:43px;
	padding-top:9px
}
body #chrome-bar #tab-bar.windowed #window-buttons {
	top:-9px
}
body #chrome-bar #tab-bar #tabs {
	flex-grow:1;
	display:flex;
	flex-direction:row;
	align-items:center
}
body #chrome-bar #tab-bar #tabs .tab-frame {
	flex-grow:1;
	max-width:256px;
	width:calc(calc(100% - 240px)/3);
	margin-right:-17px
}
body #chrome-bar #tab-bar #tabs .tab-frame:before {
	position:absolute
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container {
	position:relative;
	left:-8px;
	overflow:hidden
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .round {
	z-index:1;
	position:absolute;
	bottom:0;
	width:32px;
	height:32px;
	border:8px solid transparent;
	border-radius:100%;
	transition:.25s
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .round.round-left {
	left:-16px;
	bottom:-8px;
	border-right-color:transparent;
	transform:rotate(45deg)
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .round.round-right {
	right:-16px;
	bottom:-8px;
	transform:rotate(-45deg);
	border-left-color:transparent
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab {
	z-index:2;
	position:relative;
	left:8px;
	display:flex;
	flex-direction:row;
	align-items:center;
	width:calc(100% - 16px);
	height:34px;
	padding:0 8px 0 12px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	background-color:transparent;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	transition:.25s
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .icon {
	width:16px;
	height:16px
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .title {
	position:relative;
	top:-1px;
	flex-grow:1;
	white-space:nowrap;
	overflow:hidden;
	margin-left:8px;
	margin-right:4px;
	color:#5F6368;
	font-size:12px;
	pointer-events:none
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .title:before {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	box-shadow:inset -18px 0 18px -18px #DEE1E6,inset -18px 0 18px -18px #DEE1E6,inset -18px 0 18px -18px #DEE1E6;
	content:"";
	transition:.25s
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close {
	position:relative;
	min-width:16px;
	height:16px;
	border-radius:100%
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close svg {
	position:absolute;
	top:4px;
	left:4px;
	pointer-events:none
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close svg path {
	fill:#5F6368
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close:hover {
	background-color:#E8EAED
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close:hover svg path {
	fill:#3B4042
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close:active {
	background-color:#DADCE0
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:after {
	position:absolute;
	top:7px;
	right:8px;
	transform:translateY(0.5px);
	width:1px;
	height:20px;
	background-color:rgba(45,48,50,0.3359375);
	content:""
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .round.round-left {
	border-right-color:#EEEFF1
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .round.round-right {
	border-left-color:#EEEFF1
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .tab {
	background-color:#EEEFF1
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .tab .title {
	color:#5F6368
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .tab .title:before {
	box-shadow:inset -18px 0 18px -18px #EEEFF1,inset -18px 0 18px -18px #EEEFF1,inset -18px 0 18px -18px #EEEFF1
}
body #chrome-ba.........完整代码请登录后点击上方下载按钮下载查看