bootstrap自适应顶部下拉导航菜单暗黑模式切换效果代码
代码语言：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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0