admin管理员组

文章数量:815344

html3d扇形菜单,扇形菜单特效

扇形导航

*{

margin: 0;

padding: 0;

}

a {

text-align: right;

text-decoration: none;

color: #000 !important;

}

ul {

list-style: none;

}

.menu {

width: 100px;

height: 100px;

border-radius:0 0 100px 0;

background-color: #ddd;

position: relative;

left:100px;

top:100px;

}

.menu ul {

position: absolute;

width: 0;

height: 0;

left: 0;

top: 0;

}

.menu ul li {

width: 0;

height: 0;

}

ul.menu1 {

width: 100px;

height: 100px;

overflow: hidden;

z-index: 3;

}

.menu1>li>a{

display: block;

width: 100px;

height: 100px;

z-index: 3;

position: absolute;

border-radius:0 0 100px 0;

background-color: #666;

}

.menu1:hover {

width: 300px;

height: 300px;

}

.menu1:hover>li>a{

background-color: red;

}

.menu1:hover .menu2{

transform: rotate(0);

transition: all 1s;

}

.menu1>li .menu2>li:hover>a{

background-color: red;

}

.menu2{

transform: rotate(90deg);

}

.menu2>li>a{

position: absolute;

width: 200px;

height: 200px;

border-radius: 0 0 300px 0;

transform-origin:left top;

z-index: 2;

}

.menu2>li:nth-child(1)>a{

background-color: #ddd;

transform: rotate(0deg);

}

.menu2>li:nth-child(2)>a{

background-color: #ccc;

transform: rotate(15deg);

}

.menu2>li:nth-child(3)>a{

background-color: #bbb;

transform: rotate(30deg);

}

.menu2>li:nth-child(4)>a{

background-color: #aaa;

transform: rotate(45deg);

}

.menu2>li:nth-child(5)>a{

background-color: #999;

transform: rotate(60deg);

}

.menu2>li:nth-child(6)>a{

background-color: #888;

transform: rotate(75deg);

}

.menu2>li:hover .menu3{

transform: rotate(0deg);

transition: all 1s;

}

.menu1 .menu2 .menu3 li:hover a{

background-color: #f00;

}

.menu3 {

transform: rotate(90deg);

z-index: -100;

}

.menu3>li>a{

width: 300px;

height: 300px;

border-radius: 0 0 300px 0;

position: absolute;

transform-origin:left top;

}

.menu3>li:nth-child(1)>a{

transform: rotate(0deg);

background-color: #999;

}

.menu3>li:nth-child(2)>a{

transform: rotate(30deg);

background-color: #888;

}

.menu3>li:nth-child(3)>a{

transform: rotate(60deg);

background-color: #777;

}

本文标签: html3d扇形菜单扇形菜单特效