*{
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;
}
1207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
