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

代码语言:html

所属分类:菜单导航

代码描述:css+svg实现蜂窝六边形菜单悬浮效果代码

代码标签: 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