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

2021-09-16 1142点热度 0人点赞 0条评论

如题,使用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>

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论