master

分支 (1)

管理

管理

master

dynamic_effect
/
气泡菜单.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    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;
    }
</style>

<body>
    <ul>
        <li class="fa-home">About</li>
        <li class="fa-suitcase">News</li>
        <li class="fa-flask">Contacts</li>
        <li class="fa-user">Home</li>
    </ul>
</body>

</html>