css实现悬浮下划线抖动动画菜单效果代码-html代码-BFW代码库

css实现悬浮下划线抖动动画菜单效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮下划线抖动动画菜单效果代码

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

<html>
<head>
    <style>
@import url("https://fonts.googleapis.com/css?family=Varela+Round");
        html {
            box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
            padding: 0;
            margin: 0;
            letter-spacing: 1.1px;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            background: #1c1d22;
            font-family: "Varela Round", sans-serif;
        }

        .menu {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 720px;
            margin: 0 auto;
            height: 100vh;
            list-style: none;
        }

        .menu li {
            width: 125px;
            height: 50px;
            transition: background-position-x0.9s linear;
            text-align: center;
        }
        .menu li a {
            font-size: 22px;
            color: #777;
            text-decoration: none;
            transition: all 0.45s;
        }
        .menu li:hover {
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiI.........完整代码请登录后点击上方下载按钮下载查看