动画效果实现侧边导航栏效果

最新推荐文章于 2024-07-24 11:13:53 发布

曾某--智慧脑瓜

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量1.2k

点赞数 4

文章标签：动画 css css3

本文链接：https://blog.csdn.net/zyg_web/article/details/122490995

版权

突发奇想，用css动画效果尝试制作侧边导航栏

效果图：

动图效果：

代码展示：

HTML部分：

结构框架同平常导航栏类似

<body>
    <div class="box">
        <ul class="tip">
            <li class="nav">智慧脑瓜
                <ul>
                    <li>点赞</li>
                    <li>收藏</li>
                    <li>关注</li>
                    <li>转发</li>
                </ul>
            </li>
            <li class="nav">csdn
                <ul>
                    <li>点赞</li>
                    <li>收藏</li>
                    <li>关注</li>
                    <li>转发</li>
                </ul>
            </li>
            <li class="nav">csdn
                <ul>
                    <li>点赞</li>
                    <li>收藏</li>
                    <li>关注</li>
                    <li>转发</li>
                </ul>
            </li>
            <li class="nav">csdn
                <ul>
                    <li>点赞</li>
                    <li>收藏</li>
                    <li>关注</li>
                    <li>转发</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

CSS部分：