css3绘制环形_css3实例教程 一款纯css3实现的环形导航菜单

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

实现的代码。

html代码：

复制代码代码如下:

Cool Open/Close menu in full CSS

css代码：

[code]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;

}　　[code]