css圆形导航菜单

最新推荐文章于 2024-06-27 19:33:08 发布

Tanjc518

最新推荐文章于 2024-06-27 19:33:08 发布

阅读量743

点赞数

分类专栏：笔记文章标签： css javascript css3

本文链接：https://blog.csdn.net/Tanjc518/article/details/127101916

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <style>
        .constellation {
            margin: 0 auto;
            position: relative;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background-color: #fff;
            overflow: hidden;
            transform: rotateZ(22.5deg);
        }

        .constellation-part {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 50%;
            transform-origin: 0 100%;
            box-sizing: border-box;
        }

        .constellation-part:hover {
            background-color: #ccc;
        }

        .part-1 {
            transform: rotate(0deg) skewY(-46deg);
            background-color: orangered;
        }

        .part-2 {
            transform: rotate(45deg) skewY(-46deg);
            background-color: cyan;
        }

        .part-3 {
            transform: rotate(90deg) skewY(-46deg);
            background-color: blueviolet;
        }

        .part-4 {
            transform: rotate(135deg) skewY(-46deg);
            background-color: #f0f;
        }

        .part-5 {
            transform: rotate(180deg) skewY(-46deg);
            background-color: #ff0;
        }

        .part-6 {
            transform: rotate(225deg) skewY(-46deg);
            background-color: #f01;
        }

        .part-7 {
            transform: rotate(270deg) skewY(-46deg);
            background-color: #edf;
        }

        .part-8 {
            transform: rotate(315deg) skewY(-46deg);
            background-color: #efa;
        }

        .part-9 {
            transform: rotate(240deg) skewY(-46deg);
            background-color: #ff1;
        }

        .part-10 {
            transform: rotate(270deg) skewY(-46deg);
            background-color: #edf;
        }

        .part-11 {
            transform: rotate(300deg) skewY(-46deg);
            background-color: #c7c;
        }

        .part-12 {
            transform: rotate(330deg) skewY(-46deg);
            background-color: #c0f;
        }

        .part-13 {
            background-color: #ddd;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 50%;
            height: 50%;
            border-radius: 50%;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="constellation">
        <div class="part-1 constellation-part"></div>
        <div class="part-2 constellation-part"></div>
        <div class="part-3 constellation-part"></div>
        <div class="part-3 constellation-part"></div>
        <div class="part-4 constellation-part"></div>
        <div class="part-5 constellation-part"></div>
        <div class="part-6 constellation-part"></div>
        <div class="part-7 constellation-part"></div>
        <div class="part-8 constellation-part"></div>
        <!-- <div class="part-9 constellation-part"></div>
        <div class="part-10 constellation-part"></div>
        <div class="part-11 constellation-part"></div>
        <div class="part-12 constellation-part"></div> -->
        <div class="part-13"></div>
    </div>
</body>

</html>