首页 > web前端 > html教程 > 一款纯css3实现的环形导航菜单_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 11:56:43
原创
983 人浏览过

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

在线预览   源码下载

实现的代码。

html代码:

 <div class="container">        <h1>            Cool Open/Close menu in full CSS</h1>        <input type="checkbox" id="menu_opener_id" class="menu_opener">            <label for="menu_opener_id" class="menu_opener_label">            </label>            <div class="barre_hamburger">            </div>            <a href="#" class="link_one link_general"></a><a href="#" class="link_two link_general">            </a><a href="#" class="link_three link_general"></a><a href="#" class="link_four link_general">            </a></input>    </div>
登录后复制

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;        }
登录后复制

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板