[分享]Css六边形导航

CSS六边形导航是一种美观实用的导航方式，非常适用于一些创意性的网站设计。使用CSS可以很容易地实现带有六边形边框的导航菜单。 .hexmenu { : relative; display: fl...

CSS六边形导航是一种美观实用的导航方式，非常适用于一些创意性的网站设计。使用CSS可以很容易地实现带有六边形边框的导航菜单。

 .hex-menu {
        position: relative;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .hex-menu li {
        position: relative;
        overflow: hidden;
        visibility: hidden;
        list-style-type: none;
        width: 200px;
        height: 200px;
        margin: 20px 10px;
    }

    .hex-menu li:before {
        content: ';
        display: block;
        padding-top: 100%;
    }

    .hex-menu li:after {
        content: ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(menu-image.jpg);
        background-size: cover;
        background-position: center;
        transform: rotate(45deg) skewY(-30deg);
    }

    .hex-menu li:hover .hexagon {
        transform: scale(1.1);
    }

    .hex-menu li:hover .hexagon:before {
        transform: rotate(60deg);
    }

    .hex-menu li:hover .hexagon:after {
        transform: rotate(-60deg);
    }

    .hexagon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-45deg) skewY(30deg);
        transition: all 0.4s ease-in-out;
    }

    .hexagon:before,
    .hexagon:after {
        content: ';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #2e3440;
        opacity: 0.6;
        transition: all 0.4s ease-in-out;
    }

    .hexagon:before {
        transform: rotate(-60deg);
    }

    .hexagon:after {
        transform: rotate(60deg);
    } 

以上是CSS六边形导航实现的相应代码。其中，利用:before和:after伪类来构造六边形的边框， 利用transform来进行旋转和倾斜，利用:hover伪类来实现六边形在鼠标悬浮时的放大和旋转效果。 这样一来，我们就可以很轻松地实现一个美观、实用的CSS六边形导航了。