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(.........完整代码请登录后点击上方下载按钮下载查看