一款纯css3实现的环形导航菜单

之前为大家介绍了好几款导航菜单，今天要给大家带来一款纯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;        }

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/7957