css圆形导航菜单

最新推荐文章于 2025-10-03 14:40:37 发布

原创最新推荐文章于 2025-10-03 14:40:37 发布 · 891 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #css3

笔记专栏收录该内容

22 篇文章

订阅专栏

这段HTML和CSS代码创建了一个旋转的星形图案，通过不同角度的旋转和倾斜实现了色彩斑斓的效果。当鼠标悬停在各个部分上时，颜色会发生变化，展示了CSS的交互性和动态设计能力。

<!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>