欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

一款纯css3实现的环形导航菜单_html/css_WEB-ITnose

程序员文章站 2022-05-09 21:25:15
...
之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单。该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周。形成一个环形。效果图如下:

在线预览 源码下载

实现的代码。

html代码:

 

Cool Open/Close menu in full CSS

css代码:

        body        {            background: #34495e;        }                .container        {            width: 550px;            display: block;            margin: auto;            position: relative;        }                h1        {            text-align: center;            font-family: 'Roboto' , sans-serif;            font-weight: 400;            color: #f1c40f;        }                .menu_opener        {            display: none;        }                .menu_opener:checked ~ .link_one        {            top: 65px;        }        .menu_opener:checked ~ .link_two        {            left: 385px;        }        .menu_opener:checked ~ .link_three        {            top: 385px;        }        .menu_opener:checked ~ .link_four        {            left: 65px;        }        .menu_opener:checked ~ .barre_hamburger        {            opacity: 0;        }        .menu_opener:checked ~ .menu_opener_label:after        {            transform: rotate(45deg);            top: 70px;        }        .menu_opener:checked ~ .menu_opener_label:before        {            transform: rotate(-45deg);            top: 70px;        }                .menu_opener_label        {            background: #f1c40f;            width: 150px;            height: 150px;            display: block;            cursor: pointer;            border-radius: 50%;            position: absolute;            top: 200px;            left: 200px;            z-index: 10;        }        .menu_opener_label:after        {            position: absolute;            top: 50px;            left: 50px;            background: #000;            content: "";            width: 50px;            height: 10px;            -webkit-transition: all 0.4s ease;            transition: all 0.4s ease;        }        .menu_opener_label:before        {            position: absolute;            top: 90px;            left: 50px;            background: #000;            content: "";            width: 50px;            height: 10px;            -webkit-transition: all 0.4s ease;            transition: all 0.4s ease;        }                .barre_hamburger        {            width: 50px;            height: 10px;            position: absolute;            top: 270px;            left: 250px;            background: #000;            z-index: 20;            -webkit-transition: all 0.4s ease;            transition: all 0.4s ease;        }                .link_general        {            width: 100px;            height: 100px;            display: block;            border-radius: 50%;            position: absolute;            top: 225px;            left: 225px;            background: #ecf0f1;            -webkit-transition: all 0.4s ease;            transition: all 0.4s ease;        }                .link_one        {            background: url("home.png") #f1c40f no-repeat center center;        }                .link_two        {            background: url("mail.png") #f1c40f no-repeat center center;        }                .link_three        {            background: url("set.png") #f1c40f no-repeat center center;        }                .link_four        {            background: url("start.png") #f1c40f no-repeat center center;        }