css实现tab选项卡式菜单导航条效果代码-html代码-BFW代码库

css实现tab选项卡式菜单导航条效果代码

代码语言：html

代码描述：css实现tab选项卡式菜单导航条效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
    	*,*::before,*::after {
    	margin:0;
    	padding:0;
    	box-sizing:border-box
    }
    :root {
    	--background-color:#bbdefb;
    	--blue-50:#e3f2fd;
    	--blue-100:#bbdefb;
    	--blue-A700:#2962ff;
    	--green-50:#e8f5e9;
    	--green-100:#c8e6c9;
    	--green-A700:#00c853;
    	--purple-50:#f3e5f5;
    	--purple-100:#e1bee7;
    	--purple-A700:#a0f;
    	--orange-50:#fff3e0;
    	--orange-100:#ffe0b2;
    	--orange-A700:#ff6d00;
    	--orange-700:#f57c00;
    	--grey-900:#212121;
    	--white:#fff;
    	--round-button-active-color:#212121;
    	--translate-main-slider:100%;
    	--main-slider-color:#e3f2fd;
    	--translate-filters-slider:0;
    	--filters-container-height:3.8rem;
    	--filters-wrapper-opacity:1
    }
    html {
    	font-size:62.5%
    }
    html,body {
    	height:100%
    }
    body {
    	display:flex;
    	flex-direction:column;
    	justify-content:center;
    	align-items:center;
    	transition:background-color .4s ease-in-out;
    	background-color:var(--background-color)
    }
    button {
    	border:0;
    	cursor:pointer;
    	background-color:transparent;
    	outline:0
    }
    nav.amazing-tabs {
    	background-color:var(--white);
    	border-radius:2.5rem;
    	user-select:none;
    	padding-top:1rem
    }
    .main-tabs-container {
    	padding:0 1rem 1rem 1rem
    }
    .main-tabs-wrapper {
    	position:relative
    }
    ul.main-tabs,ul.filter-tabs {
    	list-style-type:none;
    	display:flex
    }
    ul.main-tabs li {
    	display:inline-flex;
    	position:relative;
    	padding:1.5rem;
    	z-index:1
    }
    .avatar,.avatar img {
    	height:4rem;
    	width:4rem;
    	border-radius:50%;
    	pointer-events:none
    }
    .avatar img {
    	object-fit:cover
    }
    .round-button {
    	height:4.8rem;
    	.........完整代码请登录后点击上方下载按钮下载查看