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.........完整代码请登录后点击上方下载按钮下载查看