css3 五角星圆形导航

最新推荐文章于 2023-05-25 16:24:48 发布

xiyan_yuan

最新推荐文章于 2023-05-25 16:24:48 发布

阅读量666

点赞数

分类专栏： js css3 文章标签： css3 导航

本文链接：https://blog.youkuaiyun.com/xiyan_yuan/article/details/78009625

版权

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

css3

3 篇文章

订阅专栏

本文介绍如何利用CSS3的技巧创建一个独特的五角星形状，并结合使用来构建一个圆形导航菜单。通过调整CSS样式，可以实现动态效果和交互性，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<div class="header">
        <div class="starte">start</div>
        <ul>
            <li class="w">one</li>
            <li class="w">two</li>
            <li class="w">three</li>
            <li class="w">four</li>
            <li class="w">five</li>
        </ul>
    </div>

css

*{
            margin:0;
            padding:0;
            list-style: none;
        }
        .header{
            width:300px;
            height:300px;
            margin:0 auto;
            margin-top:20px;
            position: relative;
            border-radius: 50%;
            border:1px solid red;
        }
        .starte{
            width:50px;
            height:50px;
            border-radius: 50%;
            background-color: gray;
            text-align: center;
            line-height: 50px;
            position: absolute;
            z-index: 999;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
        }


        li{
            width:50px;
            height:50px;
            border-radius: 50%;
            background-color: #00BFF0;
            text-align: center;
            line-height: 50px;
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            transition: transform 1s;
        }

<script>
    (function(){
        var li=$('.w');
        //鼠标移出事件绑定在header 上面，可以方便选中具体操作标签
        $('.header').hover(function(){},function(){
            li.each(function(){
                $(this).css('transform','translate(0,0)');
            });
        });
        //鼠标移入事件绑定在 starte 上面，移出事件如果也绑定在starte上，如果想去选中新的标签，鼠标移出后标签会隐藏掉，导致无法选中，所以要把移出事件绑定在最外层父元素上
        $('.starte').hover(function(){
            li.each(function(index){
                switch (index){
                    case 0:{
                        $(this).css('transform','translate(0,-125px)');
                        break;
                    }
                    case 1:{
                        $(this).css('transform','translate(120px,-38px)');
                        break;
                    }
                    case 2:{
                        $(this).css('transform','translate(75px,100px)');
                        break;
                    }
                    case 3:{
                        $(this).css('transform','translate(-72px,102px)');
                        break;
                    }
                    case 4:{
                        $(this).css('transform','translate(-119px,-37px)');
                        break;
                    }
                }
            })
        },function(){});
    })()
</script>

这里写图片描述