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=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
body {
font-family:'Montserrat',sans-serif;
font-weight:300;
font-size:15px;
line-height:1.7;
color:#c4c3ca;
background-color:#1f2029;
background-image:url('');
background-position:center;
background-repeat:repeat;
background-size:4%;
overflow-x:hidden;
-webkit-transition:all 300ms linear;
transition:all 300ms linear
}
a {
cursor:pointer
}
a:hover {
text-decoration:none
}
.cursor,.cursor2,.cursor3 {
position:fixed;
border-radius:50%;
transform:translateX(-50%) translateY(-50%);
pointer-events:none;
left:-100px;
top:50%;
mix-blend-mode:difference;
-webkit-transition:all 300ms linear;
transition:all 300ms linear
}
.cursor {
background-color:#fff;
height:0;
width:0;
z-index:99999
}
.cursor2,.cursor3 {
height:36px;
width:36px;
z-index:99998;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out
}
.cursor2.hover,.cursor3.hover {
-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
transform:scale(2) translateX(-25%) translateY(-25%);
border:0
}
.cursor2 {
border:2px solid #fff;
box-shadow:0 0 22px rgba(255,255,255,0.6)
}
.cursor2.hover {
background:rgba(.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0