前端小练习：纯css菜单栏

最新推荐文章于 2024-05-29 12:36:50 发布

illion-78

最新推荐文章于 2024-05-29 12:36:50 发布

阅读量375

点赞数 1

分类专栏：前端（demo）文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_39233022/article/details/105309116

版权

前端（demo）专栏收录该内容

10 篇文章 0 订阅

订阅专栏

纯css实现菜单栏

二级菜单有旋转效果，效果如下图：
在这里插入图片描述
HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导航栏</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container">
        <ul class="menu clearfix">
            <li><a href="">音乐</a></li>
            <li><a href="">动漫</a>
                <ul class="submenu">
                    <li><a href="">天气之子</a></li>
                    <li><a href="">你的名字</a></li>
                    <li><a href="">千与千寻</a></li>
                    <li><a href="">天空之城</a></li>
                    <li><a href="">烟花</a></li>
                </ul>
            </li>

            <li><a href="">图书</a></li>
            <li><a href="">电影</a>
                <ul class="submenu">
                    <li><a href="">小偷家族</a></li>
                    <li><a href="">寄生虫</a></li>
                    <li><a href="">藏身者</a></li>
                </ul>
            </li>
            <li><a href="">话剧</a></li>
            <li><a href="">音乐剧</a></li>
        </ul>
    </div>
</body>

</html>

css代码：

* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

body {
    background-color: #ccc;
}

.container {
    width: 840px;
    margin: 30px auto;
}

.container .menu>li {
    float: left;
}

.container .menu>li:first-child {
    border-radius: 3px 0 0 0;
}

.container .menu li {
    width: 140px;
    /* 线性渐变 */
    background: linear-gradient(#3d3838, #999999);
    position: relative;
}

.container .menu a {
    display: block;
    text-align: center;
    color: #000;
    font-size: 15px;
    line-height: 30px;
    border-left: 1px solid rgba(0, 0, 0, 0);
}

.menu li:hover {
    background: linear-gradient(#111, #424242);
    display: block;
}

.menu li:hover>a {
    color: #fff;
    border-left: 1px solid #fff;
}


/* 隐藏二级菜单 */

.submenu {
    position: absolute;
    /* display: none; */
    left: 0;
    top: 100%;
    perspective: 1000px;
    max-height: 0;
    z-index: 1;
}

.submenu li {
    visibility: hidden;
    transform: rotateY(90deg);
    /* 贝塞尔曲线 */
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}


/* 显现二级菜单 */

.menu>li:hover .submenu {
    max-height: 500px;
    z-index: 10;
}

.menu>li:hover .submenu li {
    visibility: visible;
    transform: rotateY(0deg);
}


/* 二级菜单延迟效果 */

.submenu li:nth-child(1) {
    transition-delay: 0ms;
}

.submenu li:nth-child(2) {
    transition-delay: 100ms;
}

.submenu li:nth-child(3) {
    transition-delay: 200ms;
}

.submenu li:nth-child(4) {
    transition-delay: 300ms;
}

.submenu li:nth-child(5) {
    transition-delay: 400ms;
}

.submenu li:nth-child(6) {
    transition-delay: 500ms;
}


/* 景深： 就是我们看到的元素是在屏幕上的投影
所以在transform: rotateZ(0px)时，perspective值越小，图像越小;
*/

景深：父元素添加perspective，子元素添加旋转元素transform，过渡效果transition: all 0.8s，利用li:nth-child()在每一个li元素上添加效果延迟transition-delay: 100ms。

illion-78

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端小练习：纯css菜单栏

纯css实现菜单栏二级菜单有旋转效果，效果如下图：HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
复制链接

扫一扫