body {
background-color: #33325d;
}
ul {
display: block;
margin: 50px auto 0;
width: 70px;
height: 70px;
padding: 0;
position: relative;
}
li {
display: block;
width: 70px;
height: 70px;
background-color: blue;
border-radius: 50%;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
transition: transform 0.12s ease-out, opacity 0.12s ease-out, color 0.12s ease-out;
cursor: pointer;
text-align: center;
line-height: 70px;
color: white;
font-family: 'fontawesome';
color: transparent;
/*
li:after{
content: "";
display: block;
bottom: 100%;
left: 50%;
height: ($offsetAmount*100%)-100;
margin-left: -1px;
position: absolute;
width: 4px;
background-color: inherit;
opacity: 0;
transition: opacity $transitionTime ease-out;
}
*/
}
li:first-child:after {
display: none;
}
li:nth-child(1) {
background-color: #004db3;
transform: translate(0, -20%);
z-index: 3;
transition-duration: 0.12s;
}
li:nth-child(2) {
background-color: #26b85a;
transform: translate(20%, 0);
z-index: 2;
transition-duration: 0.24s;
}
li:nth-child(3) {
background-color: #ffcb00;
transform: translate(0, 20%);
z-index: 1;
transition-duration: 0.36s;
}
li:nth-child(4) {
background-color: #d88e8e;
transform: translate(-20%, 0);
z-index: 0;
transition-duration: 0.48s;
}
ul:hover {
height: 308px;
}
ul:hover li {
color: white;
}
ul:hover li:nth-child(1) {
transform: translate(0, 0%);
}
ul:hover li:nth-child(1):hover {
opacity: 1;
transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
transform: translate(0, 0%) scale(1.15, 1.15);
transition-duration: 0.24s;
}
ul:hover li:nth-child(1):after {
opacity: 1;
transition-delay: 0.08s;
}
ul:hover li:nth-child(2) {
transform: translate(0, 110%);
}
ul:hover li:nth-child(2):hover {
opacity: 1;
transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
transform: translate(0, 110%) scale(1.15, 1.15);
transition-duration: 0.24s;
}
ul:hover li:nth-child(2):after {
opacity: 1;
transition-delay: 0.16s;
}
ul:hover li:nth-child(3) {
transform: translate(0, 220%);
}
ul:hover li:nth-child(3):hover {
opacity: 1;
transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
transform: translate(0, 220%) scale(1.15, 1.15);
transition-duration: 0.24s;
}
ul:hover li:nth-child(3):after {
opacity: 1;
transition-delay: 0.24s;
}
ul:hover li:nth-child(4) {
transform: translate(0, 330%);
}
ul:hover li:nth-child(4):hover {
opacity: 1;
transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
transform: translate(0, 330%) scale(1.15, 1.15);
transition-duration: 0.24s;
}
ul:hover li:nth-child(4):after {
opacity: 1;
transition-delay: 0.32s;
}
- About
- News
- Contacts
- Home
一键复制
编辑
Web IDE
原始数据
按行查看
历史