html/css纯代码实现菜单点击动画效果(适用于手机版菜单/hover模拟点击)

如题，使用css纯代码实现了的适用于手机版的菜单点击效果（带过渡动画），本代码使用hover鼠标划过来模拟点击，可以稍加修改实现点击事件。

效果如图：

Html/CSS代码实现如下，vue下点击后实现相同的功能的代码详见：https://blog.terrynow.com/2021/09/05/vue-css-animated-menu-toggle-effect-code-implement/

<!doctype html>
<html>

<head>
    <style>
        .box { margin: 200px; }

        .menu { width: 100px; height: 100px; position: relative; }
        .menu:before, .menu:after { content: ""; display: block; width: 100px; height: 16px; background: #000; border-radius: 8px; position: absolute; left: 0; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
        .menu:before { top: 5px; box-shadow: 0 37px #000; }
        .menu:after { bottom: 5px; }
        .menu:hover:before { top: 42px; box-shadow: none; -webkit-transform: rotate(225deg); transform: rotate(225deg); }
        .menu:hover:after { bottom: 42px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
    </style>

</head>

<body>
    <div class="box">
        <div class="menu"></div>
    </div>

</body>

</html>

html/css纯代码实现菜单点击动画效果(适用于手机版菜单/hover模拟点击)

文章评论