使用css实现3D导航

最新推荐文章于 2024-04-26 19:19:48 发布

一木知夏

最新推荐文章于 2024-04-26 19:19:48 发布

阅读量664

点赞数 1

文章标签： css javascript sass

本文链接：https://blog.csdn.net/m0_52908502/article/details/124730219

版权

使用css可以实现如下图的3D导航效果

首先创建如下结构,三个首页与index并列的span标签

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="">
                    <span>首页</span>
                    <span>index</span>
                </a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="">
                    <span>首页</span>
                    <span>index</span>
                </a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="">
                    <span>首页</span>
                    <span>index</span>
                </a>
            </li>
        </ul>
    </div>

</body>

需要实现首页在前index在后的效果需要用到父相子绝的定位效果,同时给li加上浮动

        .nav li a span {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 40px;
        }
        ul {
            /*去除小圆点*/
            list-style: none;
            float: left;
            margin-right: 20px;
        }

此时因为css层叠性后面的盒子会顶上来,选中第一个span使其向前移动

        .nav li a span:first-child {
            background-color: green;
            transform: translateZ(20px);

        }

接下来开启3D效果,并设置字体样式,加上过渡效果

        a {
            position: relative;
            display: block;
            text-decoration: none;
            color: #fff;
            width: 200px;
            height: 40px;
            font-size: 20px;
            transform-style: preserve-3d;
            transition: all 2s;
        }

给a加上hover使其翻转,同时让后面的span反方向翻转同时向前移动

        .nav li a:hover {
            transform: rotateX(-90deg);
        }
        .nav li a span:last-child {
            transform: translateY(-20px) rotateX(90deg);
            background-color: aqua;
        }

大功告成!

一木知夏

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
使用css实现3D导航

使用css可以实现如下图的3D导航效果首先创建如下结构,三个首页与index并列的span标签<body> <div class="nav"> <ul> <li> <a href=""> <span>首页</span> <span>inde.
复制链接

扫一扫