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-bar #tab-bar #tabs .tab-frame .tab-container.active {
	z-index:5
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .round {
	transition:0s
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .round.round-left {
	border-right-color:#FFF
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .round.round-right {
	border-left-color:#FFF
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .tab {
	transition:0s;
	background-color:#FFF
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .tab .title {
	color:#3C4043
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .tab .title:before {
	transition:0s;
	box-shadow:inset -18px 0 18px -18px #FFF,inset -18px 0 18px -18px #FFF,inset -18px 0 18px -18px #FFF
}
body #chrome-bar #tab-bar #tabs #new-tab {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	width:28px;
	height:28px;
	margin-left:9px;
	border-radius:100%;
	transition:.25s
}
body #chrome-bar #tab-bar #tabs #new-tab svg {
	width:12px;
	height:12px
}
body #chrome-bar #tab-bar #tabs #new-tab svg path {
	fill:#595C62
}
body #chrome-bar #tab-bar #tabs #new-tab:hover {
	background-color:#CBCED3
}
body #chrome-bar #tab-bar #tabs #new-tab:active {
	background-color:#BFC1C6
}
body #chrome-bar #tab-bar #gap {
	width:64px
}
body #chrome-bar #tab-bar #window-buttons {
	position:relative;
	display:flex;
	flex-direction:row
}
body #chrome-bar #tab-bar #window-buttons>div {
	position:relative;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	width:45px;
	height:29px;
	margin-bottom:5px;
	cursor:pointer
}
body #chrome-bar #tab-bar #window-buttons>div img {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	pointer-events:none
}
body #chrome-bar #tab-bar #window-buttons>div,body #chrome-bar #tab-bar #window-buttons>div * {
	transition:.25s
}
body #chrome-bar #tab-bar #window-buttons>div:not(.close):hover {
	background-color:rgba(0,0,0,0.09765625)
}
body #chrome-bar #tab-bar #window-buttons>div:not(.close):active {
	background-color:rgba(0,0,0,0.1953125);
	transition:0s
}
body #chrome-bar #tab-bar #window-buttons>div.close:hover {
	background-color:#E81123
}
body #chrome-bar #tab-bar #window-buttons>div.close:hover img {
	filter:invert(1)
}
body #chrome-bar #tab-bar #window-buttons>div.close:active {
	background-color:#E36571;
	transition:0s
}
body #chrome-bar #main-bar {
	display:flex;
	flex-direction:row;
	align-items:center;
	height:36px;
	padding:0 6px;
	background-color:#FFF
}
body #chrome-bar #main-bar .button {
	flex-shrink:0;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	margin:0 2px;
	border-radius:100%;
	transition:.25s
}
body #chrome-bar #main-bar .button[disabled] svg path {
	fill:#BABCBE
}
body #chrome-bar #main-bar .button:not([disabled]):hover {
	background-color:#EEE
}
body #chrome-bar #main-bar .button:not([disabled]):active {
	transition:.05s;
	background-color:#E2E2E2
}
body #chrome-bar #main-bar .button:not([disabled]) svg path {
	fill:#5F6368
}
body #chrome-bar #main-bar .button svg {
	width:14px;
	height:14px
}
body #chrome-bar #main-bar .button.extension {
	position:relative
}
body #chrome-bar #main-bar .button.extension img {
	width:16px
}
body #chrome-bar #main-bar .button.extension[data-disabled] {
	filter:grayscale(1) opacity(50%)
}
body #chrome-bar #main-bar .button.extension[data-notifications]:before {
	position:absolute;
	bottom:0;
	right:0;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	height:12px;
	min-width:12px;
	border-radius:2px;
	box-shadow:0 0 0 1px #FFF;
	background-color:#555;
	color:#FFF;
	font-size:6px;
	content:attr(data-notifications)
}
body #chrome-bar #main-bar #address-bar {
	flex-grow:1;
	display:flex;
	flex-direction:row;
	align-items:center;
	overflow:hidden;
	height:28px;
	margin:0 8px 0 6px;
	border-radius:20px;
	background-color:#F1F3F4;
	white-space:pre
}
body #chrome-bar #main-bar #address-bar.selected {
	box-shadow:0 0 0 1px #B3CEFB,inset 0 0 0 1px #B3CEFB;
	background-color:#FFF
}
body #chrome-bar #main-bar #address-bar .address-bar-button {
	flex-shrink:0;
	display:flex;
	flex-direction:row;
	align-items:center;
	height:24px;
	min-width:32px;
	padding:0 10px;
	margin:0 2px;
	border-radius:20px;
	font-size:14px;
	transition:background-color .25s
}
body #chrome-bar #main-bar #address-bar .address-bar-button.show-special {
	margin-right:9px
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg path {
	fill:#5F6368
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.favourite path {
	fill:#4285F4
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.https,body #chrome-bar #main-bar #address-bar .address-bar-button img.https,body #chrome-bar #main-bar #address-bar .address-bar-button .special.https {
	width:12px;
	height:12px
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.error,body #chrome-bar #main-bar #address-bar .address-bar-button img.error,body #chrome-bar #main-bar #address-bar .address-bar-button .special.error {
	width:14px;
	height:14px
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.favicon,body #chrome-bar #main-bar #address-bar .address-bar-button svg.not-favourite,body #chrome-bar #main-bar #address-bar .address-bar-button svg.favourite,body #chrome-bar #main-bar #address-bar .address-bar-button img.favicon,body #chrome-bar #main-bar #address-bar .address-bar-button img.not-favourite,body #chrome-bar #main-bar #address-bar .address-bar-button img.favourite,body #chrome-bar #main-bar #address-bar .address-bar-button .special.favicon,body #chrome-bar #main-bar #address-bar .address-bar-button .special.not-favourite,body #chrome-bar #main-bar #address-bar .address-bar-button .special.favourite {
	width:16px;
	height:16px
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.special,body #chrome-bar #main-bar #address-bar .address-bar-button img.special,body #chrome-bar #main-bar #address-bar .address-bar-button .special.special {
	position:relative;
	margin-left:10px;
	color:#5F6368;
	white-space:pre;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.special:before,body #chrome-bar #main-bar #address-bar .address-bar-button img.special:before,body #chrome-bar #main-bar #address-bar .address-bar-button .special.special:before {
	position:absolute;
	top:0;
	bottom:0;
	right:-10px;
	width:1px;
	background-color:#9D9E9F;
	content:"";
	transition:.25s
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.hide,body #chrome-bar #main-bar #address-bar .address-bar-button img.hide,body #chrome-bar #main-bar #address-bar .address-bar-button .special.hide {
	display:none
}
body #chrome-bar #main-bar #address-bar .address-bar-button:not([disabled]):hover {
	background-color:#D6D8DA
}
body #chrome-bar #main-bar #address-bar .address-bar-button:not([disabled]):hover .special:before {
	opacity:0
}
body #chrome-bar #main-bar #address-bar .address-bar-button:not([disabled]):active {
	transition:.05s;
	background-color:#C9CBCD
}
body #chrome-bar #main-bar #address-bar #address {
	flex-grow:1;
	font-size:14px
}
body #chrome-bar #main-bar #address-bar #address .protocol {
	color:#5F6368
}
body #chrome-bar #main-bar #address-bar #address .domain {
	color:#202124
}
body #chrome-bar #main-bar #address-bar #address .extension {
	color:#80868B
}
body #chrome-bar #main-bar .seperator {
	width:1px;
	height:16px;
	margin:0 6px 0 8px;
	background-color:#CED0D1
}
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="chrome-bar">
        <div id="tab-bar">
            <div id="tabs">
                <div class="tab-frame">
                    <div class="tab-container active" title="Zed Dash on CodePen" tab-id="0">
                        <div class="tab"><img src="//repo.bfw.wiki/bfwrepo/image/60840766efc4f.png" class="icon">
                            <div class="title">Zed Dash on CodePen </div>
                            <div class="close"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16"><path d="M16,1.6L14.4,0L8,6.4L1.6,0L0,1.6L6.4,8L0,14.4L1.6,16L8,9.6l6.4,6.4l1.6-1.6L9.6,8L16,1.6z" /></svg></div>
                        </div>
                        <div class="round round-left"></div>
                        <div class="round round-right"></div>
                    </div>
                </div>
                <div class="tab-frame">
                    <div class="tab-container" title="DuckDuckGo — Privacy, simplified." tab-id="1">
    .........完整代码请登录后点击上方下载按钮下载查看