/* 图标动画 */
.animations-box .badge {
    position: absolute;
    top: -10px;
    left: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(var(--bs-danger-rgb), 0.9);
    animation: pulse-danger 2s infinite;
}

.dot {
    display: block;
    position: absolute;
    top: -0.5rem;
    right: -0.1rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c03c;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(var(--bs-success-rgb), 0.9);
    animation: pulse-success 2s infinite;
}

@-webkit-keyframes pulse-success {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.9);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
    }
}

@keyframes pulse-success {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.9);
        box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.7);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0);
        box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
        box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
    }
}

@-webkit-keyframes pulse-danger {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.9);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(var(--bs-danger-rgb), 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
    }
}

@keyframes pulse-danger {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.9);
        box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.7);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(var(--bs-danger-rgb), 0);
        box-shadow: 0 0 0 10px rgba(var(--bs-danger-rgb), 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
        box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
    }
}

.bell-animations {
    display: inline-block;
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
    0% {
        -webkit-transform: rotateZ(0);
    }

    1% {
        -webkit-transform: rotateZ(30deg);
    }

    3% {
        -webkit-transform: rotateZ(-28deg);
    }

    5% {
        -webkit-transform: rotateZ(34deg);
    }

    7% {
        -webkit-transform: rotateZ(-32deg);
    }

    9% {
        -webkit-transform: rotateZ(30deg);
    }

    11% {
        -webkit-transform: rotateZ(-28deg);
    }

    13% {
        -webkit-transform: rotateZ(26deg);
    }

    15% {
        -webkit-transform: rotateZ(-24deg);
    }

    17% {
        -webkit-transform: rotateZ(22deg);
    }

    19% {
        -webkit-transform: rotateZ(-20deg);
    }

    21% {
        -webkit-transform: rotateZ(18deg);
    }

    23% {
        -webkit-transform: rotateZ(-16deg);
    }

    25% {
        -webkit-transform: rotateZ(14deg);
    }

    27% {
        -webkit-transform: rotateZ(-12deg);
    }

    29% {
        -webkit-transform: rotateZ(10deg);
    }

    31% {
        -webkit-transform: rotateZ(-8deg);
    }

    33% {
        -webkit-transform: rotateZ(6deg);
    }

    35% {
        -webkit-transform: rotateZ(-4deg);
    }

    37% {
        -webkit-transform: rotateZ(2deg);
    }

    39% {
        -webkit-transform: rotateZ(-1deg);
    }

    41% {
        -webkit-transform: rotateZ(1deg);
    }

    43% {
        -webkit-transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(0);
    }
}
/* 背景动画 */
.wave {
    background-color: #f9fafb;
    overflow: hidden;
    position: relative;
}

    .wave > div {
        z-index: 1;
    }

    .wave:before {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ffffff;
        z-index: -1;
    }

    .wave:after {
        content: ' ';
        width: 1000px;
        height: 1025px;
        position: absolute;
        bottom: 65%;
        left: -250px;
        border-radius: 35%;
        background: white;
        z-index: 0;
    }

    .wave:after {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.wave-animate:after {
    -webkit-animation: animate-wave 15s infinite linear;
    animation: animate-wave 15s infinite linear;
}

.wave-animate-slower:after {
    -webkit-animation: animate-wave 30s infinite linear;
    animation: animate-wave 30s infinite linear;
}

.wave-animate-slow:after {
    -webkit-animation: animate-wave 25s infinite linear;
    animation: animate-wave 25s infinite linear;
}

.wave-animate-fast:after {
    -webkit-animation: animate-wave 10s infinite linear;
    animation: animate-wave 10s infinite linear;
}

.wave-animate-faster:after {
    -webkit-animation: animate-wave 5s infinite linear;
    animation: animate-wave 5s infinite linear;
}

.wave.wave-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

    .wave.wave-primary .svg-icon svg g [fill] {
        fill: var(--bs-primary);
    }

.wave.wave-secondary {
    background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
}

    .wave.wave-secondary .svg-icon svg g [fill] {
        fill: var(--bs-secondary);
    }

.wave.wave-success {
    background-color: rgba(var(--bs-success-rgb), 0.1) !important;
}

    .wave.wave-success .svg-icon svg g [fill] {
        fill: var(--bs-success);
    }

.wave.wave-info {
    background-color: rgba(var(--bs-info-rgb), 0.1) !important;
}

    .wave.wave-info .svg-icon svg g [fill] {
        fill: var(--bs-info);
    }

.wave.wave-warning {
    background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
}

    .wave.wave-warning .svg-icon svg g [fill] {
        fill: var(--bs-warning);
    }

.wave.wave-danger {
    background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
}

    .wave.wave-danger .svg-icon svg g [fill] {
        fill: var(--bs-danger);
    }

.wave.wave-light {
    background-color: rgba(var(--bs-light-rgb), 0.1) !important;
}

    .wave.wave-light .svg-icon svg g [fill] {
        fill: var(--bs-light);
    }

.wave.wave-dark {
    background-color: rgba(var(--bs-dark-rgb), 0.1) !important;
}

    .wave.wave-dark .svg-icon svg g [fill] {
        fill: var(--bs-dark);
    }

.wave.wave-white {
    background-color: rgba(var(--bs-white-rgb), 0.1) !important;
}

    .wave.wave-white .svg-icon svg g [fill] {
        fill: var(--bs-white);
    }

@-webkit-keyframes animate-wave {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes animate-wave {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/* 动画css库演示 */
#myTabContent li {
    margin: 10px 10px 0 0;
    padding: 5px 10px;
    background-color: #eee;
    cursor: pointer;
}

    #myTabContent li.active {
        color: var(--bs-primary);
    }