css蜂窝菜单动画效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> wow big menu</title>
<link type="text/css" rel="stylesheet" href="http://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 C.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0