3D导航栏

最新推荐文章于 2023-05-23 12:12:16 发布

renlmingj

最新推荐文章于 2023-05-23 12:12:16 发布

阅读量223

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_44509418/article/details/120702747

版权

css 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

看到别人的网站上面那些3D的导航栏效果你羡慕了吗？接下来就由我来教你怎么写属于自己的3D导航栏效果吧，想学的快来围观吧！

html代码：

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">菜单一</div>
                <div class="bottom">菜单1</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">菜单二</div>
                <div class="bottom">菜单2</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">菜单三</div>
                <div class="bottom">菜单3</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">菜单四</div>
                <div class="bottom">菜单4</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">菜单五</div>
                <div class="bottom">菜单5</div>
            </div>
        </li>
    </ul>
</body>

css代码：

* {
            margin: 0;
            padding: 0;
        }
        
        ul {
            margin: 100px;
        }
        
        ul li {
            width: 120px;
            height: 35px;
            list-style: none;
            float: left;
            margin: 0 5px;
            /* 透视 */
            perspective: 500px;
        }
        
        .box {
            width: 100%;
            height: 100%;
            /* 立体空间保留 */
            transform-style: preserve-3d;
            /* 过渡效果 */
            transition: all .4s;
        }
        
        .box:hover {
            /* 鼠标移入box沿着x轴旋转180度 */
            transform: rotateX(90deg);
            cursor: pointer;
        }
        
        .box:hover .bottom {
            /* 添加阴影 */
            box-shadow: 2px 2px 2px #ccc;
        }
        
        .front,
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 35px;
        }
        
        .front {
            background-color: #ccc;
            z-index: 1;
            /* 沿着z轴移动17.5px 盒子向前移动 */
            transform: translateZ(17.5px);
        }
        
        .bottom {
            background-color: #999;
            /* x轴一定是负值   向下移动(如果有移动必须先写移动) */
            transform: translateY(17.5px) rotateX(-90deg);
        }

效果图：

效果图展示
以上代码就是导航栏3D效果了，看完以上代码你是否有新的思路能够完成这个小案例呢？如果有可否分享给我呢？我们一起学习吧！

renlmingj

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
3D导航栏

看到别人的网站上面那些3D的导航栏效果你羡慕了吗？接下来就由我来教你怎么写属于自己的3D导航栏效果吧，想学的快来围观吧！html代码：<body> <ul> <li> <div class="box"> <div class="front">菜单一</div> <div class="bottom">菜单1&l
复制链接

扫一扫