bootstrap自适应顶部下拉导航菜单暗黑模式切换效果代码-html代码-BFW代码库

代码语言：html

代码描述：bootstrap自适应顶部下拉导航菜单暗黑模式切换效果代码

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

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

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
      @import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');
	body {
	font-family:'Poppins',sans-serif;
	font-size:16px;
	line-height:24px;
	font-weight:400;
	color:#212112;
	background-image:url('');
	background-position:center;
	background-repeat:repeat;
	background-size:7%;
	background-color:#fff;
	overflow-x:hidden;
	transition:all 200ms linear
}
::selection {
	color:#fff;
	background-color:#8167a9
}
::-moz-selection {
	color:#fff;
	background-color:#8167a9
}
.start-header {
	opacity:1;
	transform:translateY(0);
	padding:20px 0;
	box-shadow:0 10px 30px 0 rgba(138,155,165,0.15);
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.start-header.scroll-on {
	box-shadow:0 5px 10px 0 rgba(138,155,165,0.15);
	padding:10px 0;
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.start-header.scroll-on .navbar-brand img {
	height:24px;
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.navigation-wrap {
	position:fixed;
	width:100%;
	top:0;
	left:0;
	z-index:1000;
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.navbar {
	padding:0
}
.navbar-brand img {
	height:28px;
	width:auto;
	display:block;
	filter:brightness(10%);
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.navbar-toggler {
	float:right;
	border:0;
	padding-right:0
}
.navbar-toggler:active,.navbar-toggler:focus {
	outline:0
}
.navbar-light .navbar-toggler-icon {
	width:24px;
	height:17px;
	background-image:none;
	position:relative;
	border-bottom:1px solid #000;
	transition:all 300ms linear
}
.navbar-light .navbar-toggler-icon:after,.navbar-light .navbar-toggler-icon:before {
	width:24px;
	position:absolute;
	height:1px;
	background-color:#000;
	top:0;
	left:0;
	content:'';
	z-index:2;
	transition:all 300ms linear
}
.navbar-light .navbar-toggler-icon:after {
	top:8px
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transform:rotate(45deg)
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
	transform:translateY(8px) rotate(-45deg)
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color:transparent
}
.nav-link {
	color:#212121!important;
	font-weight:500;
	transition:all 200ms linear
}
.nav-item:hover .nav-link {
	color:#8167a9!important
}
.nav-item.active .nav-link {
	color:#777!important
}
.nav-link {
	position:relative;
	padding:5px 0!important;
	display:inline-block
}
.nav-item:after {
	position:absolute;
	bottom:-5px;
	left:0;
	width:100%;
	height:2px;
	content:'';
	background-color:#8167a9;
	opacity:0;
	transition:all 200ms linear
}
.nav-item:hover:after {
	bottom:0;
	opacity:1
}
.nav-item.active:hover:after {
	opacity:0
}
.nav-item {
	position:relative;
	transition:all 200ms linear
}
.bg-light {
	background-color:#fff!important;
	transition:all 200ms linear
}
.section {
	position:relative;
	width:100%;
	display:block
}
.full-height {
	height:100vh
}
.over-hide {
	overflow:hidden
}
.absolute-center {
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	margin-top:40px;
	transform:translateY(-50%);
	z-index:20
}
h1 {
	font-size:48px;
	line-height:1.2;
	font-weight:700;
	color:#212112;
	text-align:center
}
p {
	text-align:center;
	margin:0;
	padding-top:10px;
	opacity:1;
	transform:translate(0);
	transition:all 300ms linear;
	transition-delay:1700ms
}
body.hero-anime p {
	opacity:0;
	transform:translateY(40px);
	transition-delay:1700ms
}
h1 span {
	display:inline-block;
	transition:all 300ms linear;
	opacity:1;
	transform:translate(0)
}
body.hero-anime h1 span:nth-child(1) {
	opacity:0;
	transform:translateY(-20px)
}
body.hero-anime h1 span:nth-child(2) {
	opacity:0;
	transform:translateY(-30px)
}
body.hero-anime h1 span:nth-child(3) {
	opacity:0;
	transform:translateY(-50px)
}
body.hero-anime h1 span:nth-child(4) {
	opacity:0;
	transform:translateY(-10px)
}
body.hero-anime h1 span:nth-child(5) {
	opacity:0;
	transform:translateY(-50px)
}
body.hero-anime h1 span:nth-child(6) {
	opacity:0;
	transform:translateY(-20px)
}
body.hero-anime h1 span:nth-child(7) {
	opacity:0;
	transform:translateY(-40px)
}
body.hero-anime h1 span:nth-child(8) {
	opacity:0;
	transform:translateY(-10px)
}
body.hero-anime h1 span:nth-child(9) {
	opacity:0;
	transform:translateY(-30px)
}
body.hero-anime h1 span:nth-child(10) {
	opacity:0;
	transform:translateY(-20px)
}
h1 span:nth-child(1) {
	transition-delay:1000ms
}
h1 span:nth-child(2) {
	transition-delay:700ms
}
h1 span:nth-child(3) {
	transition-delay:900ms
}
h1 span:nth-child(4) {
	transition-delay:800ms
}
h1 span:nth-child(5) {
	transition-delay:1000ms
}
h1 span:nth-child(6) {
	transition-delay:700ms
}
h1 span:nth-child(7) {
	transition-delay:900ms
}
h1 span:nth-child(8) {
	transition-delay:800ms
}
h1 span:nth-child(9) {
	transition-delay:600ms
}
h1 span:nth-child(10) {
	transition-delay:700ms
}
body.hero-anime h1 span:nth-child(11) {
	opacity:0;
	transform:translateY(30px)
}
body.hero-anime h1 span:nth-child(12) {
	opacity:0;
	transform:translateY(50px)
}
body.hero-anime h1 span:nth-child(13) {
	opacity:0;
	transform:translateY(20px)
}
body.hero-anime h1 span:nth-child(14) {
	opacity:0;
	transform:translateY(30px)
}
body.hero-anime h1 span:nth-child(15) {
	opacity:0;
	transform:translateY(50px)
}
h1 span:nth-child(11) {
	transition-delay:1300ms
}
h1 span:nth-child(12) {
	transition-delay:1500ms
}
h1 span:nth-child(13) {
	transition-delay:1400ms
}
h1 span:nth-child(14) {
	transition-delay:1200ms
}
h1 span:nth-child(15) {
	transition-delay:1450ms
}
#switch,#circle {
	cursor:pointer;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear
}
#switch {
	width:60px;
	height:8px;
	border:2px solid #8167a9;
	border-radius:27px;
	background:#000;
	position:relative;
	display:block;
	margin:0 auto;
	text-align:center;
	opacity:1;
	transform:translate(0);
	transition:all 300ms linear;
	transition-delay:1900ms
}
body.hero-anime #switch {
	opacity:0;
	transform:translateY(40px);
	transition-delay:1900ms
}
#circle {
	position:absolute;
	top:-11px;
	left:-13px;
	width:26px;
	height:26px;
	border-radius:50%;
	background:#000
}
.switched {
	border-color:#000!important;
	background:#8167a9!important
}
.switched #circle {
	left:43px;
	box-shadow:0 4px 4px rgba(26,53,71,0.25),0 0 0 1px rgba(26,53,71,0.07);
	background:#fff
}
.nav-item .dropdown-menu {
	transform:translate3d(0,10px,0);
	visibility:hidden;
	opacity:0;
	max-height:0;
	display:block;
	padding:0;
	margin:0;
	transition:all 200ms linear
}
.nav-item.show .dropdown-menu {
	opacity:1;
	visibility:visible;
	max-height:999px;
	transform:translate3d(0,0px,0)
}
.dropdown-menu {
	padding:10px!important;
	margin:0;
	font-size:13px;
	letter-spacing:1px;
	color:#212121;
	background-color:#fcfaff;
	border:0;
	border-radius:3px;
	box-shadow:0 5px 10px 0 rgba(138,155,165,0.15);
	transition:all 200ms linear
}
.dropdown-toggle::after {
	display:none
}
.dropdown-item {
	padding:3px 15px;
	color:#212121;
	border-radius:2px;
	transition:all 200ms linear
}
.dropdown-item:hover,.dropdown-item:focus {
	color:#fff;
	background-color:rgba(129,103,169,.6)
}
body.dark {
	color:#fff;
	background-color:#1f2029
}
body.dark .navbar-brand img {
	filter:brightness(100%)
}
body.dark h1 {
	color:#fff
}
body.dark h1 span {
	transition-delay:0ms!important
}
body.dark p {
	color:#fff;
	transition-delay:0ms!important
}
body.dark .bg-light {
	background-color:#14151a!important
}
body.dark .start-header {
	box-shadow:0 10px 30px 0 rgba(0,0,0,0.15)
}
body.dark .start-header.scroll-on {
	box-shadow:0 5px 10px 0 rgba(0,0,0,0.15)
}
body.dark .nav-link {
	color:#fff!important
}
body.dark .nav-item.active .nav-link {
	color:#999!important
}
body.dark .dropdown-menu {
	color:#fff;
	background-color:#1f2029;
	box-shadow:0 5px 10px 0 rgba(0,0,0,0.25)
}
body.dark .dropdown-item {
	color:#fff
}
body.dark .navbar-light .navbar-toggler-icon {
	border-bottom:1px solid #fff
}
body.dark .navbar-light .navbar-toggler-icon:after,body.dark .navbar-light .navbar-toggler-icon:before {
	background-col.........完整代码请登录后点击上方下载按钮下载查看