菜单文字伸缩点击动画效果-html代码-BFW代码库

菜单文字伸缩点击动画效果

代码语言：html

代码描述：菜单文字伸缩点击动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <style>
:root {
        --color: #fff;
        --background-color: #000;
    }

        body {
            min-height: 100vh;
            background-color: var(--background-color);
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            font-weight: 16px;
        }

        .wrapper {
            width: 100%;
            max-width: 300px;
            margin: 0 auto;
            padding: 0 10px;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            border-left: 1px solid var(--color);
            border-top: 1px solid var(--color);
        }

        li {
            border-bottom: 1px solid var(--color);
            padding: 1em 0 1em 1em;
        }

        a {
            --width: 0;
            color: var(--color);
            font-size: 1em;
            line-height: 1em;
            font-weight: bold;
            text-decoration: none;
            display: -webkit-box;
            display: flex;
            width: var(--width);
            white-space: nowrap;
            -webkit-box-pack: justify;
            justify-content: space-between;
            -webkit-transition: all .8s;
            transition: all .8s;
        }

        a:hover {
            --width: 100%;
        }
    </style>

</head>
<body translate="no">
    <div class='wrapper'>
        <ul>
            <li>
                <a href='#'>
                    <span>B</span>
                    <span>O</span>
                    <span>O</span>
                    <span>K</span>
                 .........完整代码请登录后点击上方下载按钮下载查看