css+js实现菜单点击涟漪动画效果代码-html代码-BFW代码库

css+js实现菜单点击涟漪动画效果代码

代码语言：html

代码描述：css+js实现菜单点击涟漪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">

    <style>
        :root {
        --primary-color: #3498DB;
        --accent-color: #E74C3C;
        --grey-700-color: #423f3f;
        --grey-900-color: #333;
        --base-spacing: 8px;
        --font-m: 14px;
        --shadow-small: 0 2px 4px -1px rgb(0 0 0 / 20%),0px 4px 5px 0 rgb(0 0 0 / 14%),0px 1px 10px 0 rgb(0 0 0 / 12%)
    }
    
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        margin: 0;
        padding: 0;
        background-color: var(--grey-900-color)
    }
    
    .tabs-box {
        display: flex;
        justify-content: center;
        max-width: 640px;
        height: 48px;
        width: 100%;
        background-color: var(--primary-color);
        box-shadow: var(--shadow-small);
        border-top-left-radius: 3px;
        border-top-right-radius: 3px
    }
    
    .tabs-menu {
        display: flex;
        justify-content: center;
        position: relative
    }
    
    .tab-button {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        position: relative;
        overflow: hidden;
        font-weight: 500;
        font-size: var(--font-m);
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .02857em;
        white-space: normal;
        letter-spacing: .02857em;
        background-color: transparent;
        padding: var(--base-spacing) calc(var(--base-spacing) * 2);
        cursor: pointer;
        transition: color 250ms ease-in
    }
    
    .tab-button .active {
        color: var(--grey-700)
    }
    
    .tab-button__content {
        display: block;
        pointer-events: none
    }
    
    .tab-button:hover,.tab-button:focus {
        outline: 0;
        color: var(--grey-700)
    }
    
    .tab-indicator {
        background-color: var(--accent-color);
        height: 3px;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: left 250ms ease-in-out,width 650ms ease-in-out
    }
    
    .tab-button__ripple {
        position: absolute;
        background-color: black;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        animation: ripple 1000ms linear infinite;
        pointer-events: none
    }
    
    .focus::after {
        content: '';
        position: absolute;
        background-color: black;
        opacity: .2;
        border-radius: 50%;
        width: 80%;
        height: auto;
        padding-top: 80%;
        background: black;
        transition: transform 300ms ease-in-out;
        transform: scale(0);
        animation: focusRipple 300ms linear infinite,focusPulse 1700ms linear 300ms infinite
    }
    
    @keyframes ripple {
        0% {
            width: 0;
            height: 0;
            opacity: .4
        }
    
        100% {
            width: 500px;
            height: 500px;
            opacity: 0
        }
    }
    
    @keyframes focusRipple {
        0% {
            transform: scale(0)
        }
    
        100% {
            transform: scale(1)
        }
    }
    
    @keyframes focusPulse {
        0%,100% {
            transform: scale(1)
        }
    
        50% {
            transform: scale(1.1)
        }
    }
            html,*{font-family:'Inter';box-sizing:border-box}body{line-height:1.6;color:#fff}.lead{font-size:1.5rem;font-weight:300}.container{margin:150px auto;max-width:960px}#carbonads a{color:#fff;text-decoration:none}#carbonads a:hover{color:#fff}
    </style>
</head>

<body>
    <nav class="tabs-box">
        <div aria-label="simple tabs example" class="tabs-menu js-tabs-menu" role="tablist"><button class="tab-button js-tab-button" type="button" role="tab"><span class="tab-button__content">Item One</span></button><button class="tab-button js-tab-button" type="button" role="tab"><span class="tab-button__content">Item Two</span></button>
            <button class="tab-button js-tab-button" type="button" role="tab"><span class="tab-button__content">Item Three</span></button><span class="tab-indicator js-tab-indicator"></span></div>
    </nav>
    <script>
        const ACTIVE_CLASS = 'active'
        const tabItems = document.querySelectorAll('.js-tab-button');
        const indic.........完整代码请登录后点击上方下载按钮下载查看