html网页动态泡泡的代码,气泡菜单.html

Document

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

原始数据

按行查看

历史