css+svg实现蜂窝六边形菜单悬浮效果代码-html代码-BFW代码库

代码语言：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 */.clear:before,.clear:after {
	content:" ";
	display:table;
}
.clear:after {
	clear:both;
}
.pt-table {
	display:table;
	width:100%;
	height:-webkit-calc(100vh - 4px);
	height:-moz-calc(100vh - 4px);
	height:calc(100vh - 4px);
}
.pt-tablecell {
	display:table-cell;
	vertical-align:middle;
}
.overlay {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.relative {
	position:relative;
}
.primary,.link:hover {
	color:#FA6862;
}
.no-gutter {
	margin-left:0;
	margin-right:0;
}
.no-gutter >[class^="col-"] {
	padding-left:0;
	padding-right:0;
}
.flex {
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flexbox;
	display:flex;
}
.flex-middle {
	-webkit-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
	-moz-align-items:center;
	align-items:center;
}
.space-between {
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	justify-content:space-between;
}
.nicescroll-cursors {
	background:#FA6862 !important;
}
.preloader {
	bottom:0;
	left:0;
	position:fixed;
	right:0;
	top:0;
	z-index:1000;
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flexbox;
	display:flex;
}
.preloader.active.hidden {
	display:none;
}
.loading-mask {
	background-color:#FA6862;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:20%;
	-webkit-transition:all 0.6s cubic-bezier(0.61,0,0.6,1) 0s;
	-moz-transition:all 0.6s cubic-bezier(0.61,0,0.6,1) 0s;
	-o-transition:all 0.6s cubic-bezier(0.61,0,0.........完整代码请登录后点击上方下载按钮下载查看