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.6,1) 0s;
        transition:all 0.6s cubic-bezier(0.61,0,0.6,1) 0s;
}
.loading-mask:nth-child(2) {
        left:20%;
        -webkit-transition-delay:0.1s;
        -moz-transition-delay:0.1s;
        -o-transition-delay:0.1s;
        transition-delay:0.1s;
}
.loading-mask:nth-child(3) {
        left:40%;
        -webkit-transition-delay:0.2s;
        -moz-transition-delay:0.2s;
        -o-transition-delay:0.2s;
        transition-delay:0.2s;
}
.loading-mask:nth-child(4) {
        left:60%;
        -webkit-transition-delay:0.3s;
        -moz-transition-delay:0.3s;
        -o-transition-delay:0.3s;
        transition-delay:0.3s;
}
.loading-mask:nth-child(5) {
        left:80%;
        -webkit-transition-delay:0.4s;
        -moz-transition-delay:0.4s;
        -o-transition-delay:0.4s;
        transition-delay:0.4s;
}
.preloader.active.done {
        z-index:0;
}
.preloader.active .loading-mask {
        width:0;
}
/*------------------------------------------------      Start Styling-------------------------------------------------*/.mt20 {
        margin-top:20px;
}
.site-wrapper {
        border-top:4px solid #ff0037;
}
.page-close {
        font-size:30px;
        position:absolute;
        right:30px;
        top:30px;
        z-index:100;
}
.page-title {
        margin-bottom:75px;
}
.page-title img {
        margin-bottom:20px;
}
.page-title h2 {
        font-size:68px;
        margin-bottom:25px;
        position:relative;
        z-index:0;
        font-weight:900;
        text-transform:uppercase;
}
.page-title p {
        font-size:16px;
}
.page-title .title-bg {
        color:rgba(30,37,48,0.07);
        font-size:158px;
        left:0;
        letter-spacing:10px;
        line-height:0.7;
        position:absolute;
        right:0;
        top:50%;
        z-index:-1;
        -webkit-transform:translateY(-50%);
        -moz-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
        -o-transform:translateY(-50%);
        transform:translateY(-50%);
}
.section-title {
        margin-bottom:20px;
}
.section-title h3 {
        display:inline-block;
        position:relative;
}
.section-title h3::before,.section-title h3::after {
        content:"";
        height:2px;
        position:absolute;
        bottom:8px;
        left:-webkit-calc(100% + 14px);
        left:-moz-calc(100% + 14px);
        left:calc(100% + 14px);
}
.section-title h3::before {
        background-color:#1e2530;
        width:96px;
        bottom:14px;
}
.section-title h3::after {
        background-color:#FA6862;
        width:73px;
}
.section-title.light h3 {
        color:#fff;
}
.section-title.light h3::before {
        background-color:#fff;
}
.page-nav {
        bottom:40px;
        left:0;
        position:absolute;
        right:0;
}
.page-nav span {
        font-family:"Open Sans",sans-serif;
        font-size:14px;
        font-weight:500;
        line-height:0.9;
        text-transform:uppercase;
}
/*------------------------------------------------    Home Page-------------------------------------------------*/.hexagon-item:first-child {
        margin-left:0;
}
.page-home {
        background-position:center center;
        background-repeat:no-repeat;
        background-size:cover;
        vertical-align:middle;
}
.page-home .overlay {
        background-color:rgba(14,17,24,0.97);
}
/* End of container */.hexagon-item {
        cursor:pointer;
        width:200px;
        height:173.20508px;
        float:left;
        margin-left:-29px;
        z-index:0;
        position:relative;
        -webkit-transform:rotate(30deg);
        -moz-transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        -o-transform:rotate(30deg);
        transform:rotate(30deg);
}
.hexagon-item:first-child {
        margin-left:0;
}
.hexagon-item:hover {
        z-index:1;
}
.hexagon-item:hover .hex-item:last-child {
        opacity:1;
        -webkit-transform:scale(1.3);
        -moz-transform:scale(1.3);
        -ms-transform:scale(1.3);
        -o-transform:scale(1.3);
        transform:scale(1.3);
}
.hexagon-item:hover .hex-item:first-child {
        opacity:1;
        -webkit-transform:scale(1.2);
        -moz-transform:scale(1.2);
        -ms-transform:scale(1.2);
        -o-transform:scale(1.2);
        transform:scale(1.2);
}
.hexagon-item:hover .hex-item:first-child div:before,.hexagon-item:hover .hex-item:first-child div:after {
        height:5px;
}
.hexagon-item:hover .hex-item div::before,.hexagon-item:hover .hex-item div::after {
        background-color:#ff0037;
}
.hexagon-item:hover .hex-content svg {
        -webkit-transform:scale(0.97);
        -moz-transform:scale(0.97);
        -ms-transform:scale(0.97);
        -o-transform:scale(0.97);.........完整代码请登录后点击上方下载按钮下载查看