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

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

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网