一个漂亮的下拉菜单

最新推荐文章于 2021-05-30 23:33:32 发布

听说你很会玩

最新推荐文章于 2021-05-30 23:33:32 发布

阅读量315

点赞数

分类专栏： JavaScript 文章标签： html css css3 html5 前端

听说你很会玩

本文链接：https://blog.csdn.net/qq_44224698/article/details/104902362

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高斯下拉菜单</title>
    <style>
        html{
        }
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000000;
        }
        .list-wrap{
            width: 300px;
            height: 400px;
            text-align: center;
            position: relative;

        }
        li{
            list-style: none;
            padding: 20px 50px;
            color: #fff;
            text-align: center;
            background-color: #000000;
        }
        li::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            transform: scaleY(0);/*标签大小的样式变化*/
            transition: transform 0.6s;/*过渡*/
            transform-origin: bottom;
            filter: blur(40px);
        }
       li:hover::before{
           transform-origin: top;
           transform: scaleY(1);//标签大小的样式变化
        }
        ul li:hover{
            background-color: #4CAF50;
            transition: transform 0.6s;
        }
    </style>
<script></script>
</head>
<body>
<ul class="list-wrap">
    <!--无序列表标签-->
    <li>HTML-CSSHTML</li>
    <li>HTML+CSS</li>
    <li>HTML+CSS</li>
    <li>HTML+CSS</li>
    <li>HTML+CSS</li>
    <li>HTML+CSS</li>
</ul>
</body>
</html>