css蜂窝菜单动画效果-html代码-BFW代码库

代码语言：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 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;
            heigh.........完整代码请登录后点击上方下载按钮下载查看

css蜂窝菜单动画效果

网友评论0

css实现全屏覆盖弹出导航条效果代码

gsap实现左侧弹出式多级菜单栏效果代码

js+css实现玻璃透视图标菜单滑动导航效果代码

div+css实现黑色酷炫导航菜单效果代码

div+css实现黑色酷炫导航菜单选中效果代码

div+css实现黑色酷炫光感照明导航菜单选中效果代码

div+css实现翻转滑动菜单导航代码

svg+css实现液态玻璃顶部导航菜单效果代码

css实现立体门打开文字菜单栏导航效果代码

svg+css实现圆形环形伸缩菜单代码