立体导航条

最新推荐文章于 2022-06-07 17:02:27 发布

fandy917

最新推荐文章于 2022-06-07 17:02:27 发布

阅读量335

点赞数

文章标签：导航条

本文链接：https://blog.csdn.net/u014114347/article/details/79841438

版权

************************写的东西很基础，只是为了加深记忆和理解，有错误望指教，万分感谢********************8

1效果图（由于是动态的没法截屏，可能看不出效果）

2步骤

3代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        /*去除默认值得影响*/
        *{padding: 0;margin: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}

        ul{
            width: 400px;height: 40px;
            padding:0 20px;
            margin:100px auto;
            border-bottom: 3px solid #909;
        }
        ul li{float:left;}
        ul li a{
            display:block;
            width: 120px;
            margin-right: 1px;
            position:relative;
        
            transform-style: preserve-3d;
            /*过渡效果*/
            transition:transform 2s 1s;
        }
        ul li a span{
            display:block;
            width: 100%;
            height: 40px;
            font-size: 30px;
            line-height: 40px;
            text-align: center;
            background-color: #909;
            color:#fff;
        }
        ul li a span:nth-child(1){
            /*后面的盒子向Y轴方向平移本身的一半，再沿X轴方向顺时针旋转90度*/
            transform:translateY(-20px) rotateX(90deg);
        }
        ul li a span:nth-child(2){
            /*利用定位，将这个盒子放在后面藏着大小一样大*/
            position:absolute;top: 0;left:0;
            /*将这个盒子沿Z轴向人眼方向平移自身的一半*/
            transform:translateZ(20px);
        }

        ul li:hover a{
            transform:rotateX(-90deg);
        }    
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#"><span>导航条</span><span>WEB</span></a></li>
            <li><a href="#"><span>导航条</span><span>WEB</span></a></li>
            <li><a href="#"><span>导航条</span><span>WEB</span></a></li>
        </ul>
    </body>
</html>

fandy917

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
立体导航条

************************写的东西很基础，只是为了加深记忆和理解，有错误望指教，万分感谢********************81效果图（由于是动态的没法截屏，可能看不出效果）2步骤3代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-...
复制链接

扫一扫