#menu {
width
:
150px
;
height
:
150px
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
margin
:
-75px
0
0
-75px
;
list-style
:
none
;
font-size
:
200%
;
}
.menu-button {
opacity
:
0
;
z-index
:
-1
;
}
.menu-button {
width
:
150px
;
height
:
150px
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
margin
:
-75px
0
0
-75px
;
border-radius
:
50%
;
background
:
#424242
;
background-size
:
100%
;
overflow
:
hidden
;
text-decoration
:
none
;
}
#menu:not(:target) > a:first-of-type,
#menu:target > a:last-of-type {
opacity
:
1
;
z-index
:
1
;
}
#menu:not(:target) > .icon-plus:before,
#menu:target > .icon-minus:before {
opacity
:
1
;
}
.menu-item {
width
:
70px
;
height
:
70px
;
position
:
absolute
;
left
:
55%
;
line-height
:
5px
;
top
:
50%
;
margin
:
-50px
0
0
-50px
;
border-radius
:
50%
;
background-color
:
#424242
;
transform
:
translate
(
0px
,
0px
);
transition
: transform
500
ms;
z-index
:
-2
;
transition
:
0.5
s;
}
.menu-item:hover {
opacity
:
0.5
;
}
.menu-item a {
color
:
#fff
;
position
:
relative
;
top
:
30%
;
left
:
0
;
text-decoration
:
none
;
}
#menu:target > .menu-item:nth-child(
6
) {
transform
:
rotate
(
60
deg)
translateY
(
-150px
)
rotate
(
300
deg);
transition-delay
:
0
s;
}
#menu:target > .menu-item:nth-child(
5
) {
transform
:
rotate
(
20
deg)
translateY
(
-155px
)
rotate
(
-20
deg);
transition-delay
:
0.1
s;
}
#menu:target > .menu-item:nth-child(
3
) {
transform
:
rotate
(
-20
deg)
translateY
(
-155px
)
rotate
(
20
deg);
transition-delay
:
0.2
s;
}
#menu:target > .menu-item:nth-child(
4
) {
transform
:
rotate
(
-60
deg)
translateY
(
-150px
)
rotate
(
60
deg);
transition-delay
:
0.3
s;
}
.content {
position
:
absolute
;
text-align
:
center
;
margin
:
-10px
0
0
-30px
;
top
:
70%
;
left
:
50%
;
font-size
:
20px
;
}