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