css+svg实现蜂窝六边形菜单悬浮效果代码
代码语言:html
所属分类:菜单导航
代码描述:css+svg实现蜂窝六边形菜单悬浮效果代码
下面为部分代码预览,完整代码请点击下载或在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">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
body {
font-family:"Libre Baskerville",serif;
font-weight:400;
font-size:16px;
line-height:30px;
background-color:#0c0f15;
color:#ababab;
}
.heading-page {
text-transform:uppercase;
font-size:43px;
font-weight:bolder;
letter-spacing:3px;
color:white;
}
a {
color:inherit;
-webkit-transition:all 0.3s ease 0s;
-moz-transition:all 0.3s ease 0s;
-o-transition:all 0.3s ease 0s;
transition:all 0.3s ease 0s;
}
a:hover,a:focus {
color:#ababab;
text-decoration:none;
outline:0 none;
}
h1,h2,h3,h4,h5,h6 {
color:#1e2530;
font-family:"Open Sans",sans-serif;
margin:0;
line-height:1.3;
}
p {
margin-bottom:20px;
}
p:last-child {
margin-bottom:0;
}
/* * Selection color */::-moz-selection {
background-color:#FA6862;
color:#fff;
}
::selection {
background-color:#FA6862;
color:#fff;
}
/* * Reset bootstrap's default style */.form-control::-webkit-input-placeholder,::-webkit-input-placeholder {
opacity:1;
color:inherit;
}
.form-control:-moz-placeholder,:-moz-placeholder {
/* Firefox 18- */ opacity:1;
color:inherit;
}
.form-control::-moz-placeholder,::-moz-placeholder {
/* Firefox 19+ */ opacity:1;
color:inherit;
}
.form-control:-ms-input-placeholder,:-ms-input-placeholder {
opacity:1;
color:inherit;
}
button,input,select,textarea,label {
font-weight:400;
}
.btn {
-webkit-transition:all 0.3s ease 0s;
-moz-transition:all 0.3s ease 0s;
-o-transition:all 0.3s ease 0s;
transition:all 0.3s ease 0s;
}
.btn:hover,.btn:focus,.btn:active:focus {
outline:0 none;
}
.btn-primary {
background-color:#FA6862;
border:0;
font-family:"Open Sans",sans-serif;
font-weight:700;
height:48px;
line-height:50px;
padding:0 42px;
text-transform:uppercase;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary:active:focus {
background-color:#f9423a;
}
.btn-border {
border:1px solid #d7d8db;
display:inline-block;
padding:7px;
}
/* * CSS Helper Class.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0