纯CSS3实现动感菜单

最新推荐文章于 2023-12-11 15:39:14 发布

NINE-NINE

最新推荐文章于 2023-12-11 15:39:14 发布

阅读量420

点赞数

分类专栏： HTML CSS3 前端小实例文章标签： css3

本文链接：https://blog.csdn.net/m0_38099607/article/details/72353932

版权

HTML 同时被 3 个专栏收录

24 篇文章 2 订阅

订阅专栏

前端小实例

18 篇文章 4 订阅

订阅专栏

CSS3

10 篇文章 0 订阅

订阅专栏

今天学了一款用CSS3实现的垂直的动感菜单，附上效果图：
这里写图片描述
HTML代码：

<ul class="navList">
    <li><a href="javascript:">11111</a></li>
    <li><a href="javascript:">11111</a></li>
    <li><a href="javascript:">11111</a></li>
    <li><a href="javascript:">11111</a></li>
    <li><a href="javascript:">11111</a></li>
    <li><a href="javascript:">11111</a></li>
    <li><a href="javascript:">11111</a></li>
</ul>

CSS代码：

*{ margin: 0; padding: 0; }
body{ background: #f2f2f2; }
.navList{
    list-style: none;
    display: block;
    width: 200px;
    position: relative;
    top: 100px;
    left: 100px;
    padding: 60px 0 60px 0;
    background: url(images/shad2.png) no-repeat;
    background-size: 50% 100%;
}
.navList li {
    margin: 5px 0 0 0;
}
.navList li a {
    transition: all 0.3s ease-out;
    background: #cbcbcb url(images/border.png) no-repeat;
    color: #174867;
    padding: 7px 15px 7px 15px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100px;
    display: block;
    text-decoration: none;
    box-shadow: 2px 2px 4px #888;
}

.navList li a:hover {
    background: #ebebeb url(images/border.png) no-repeat;
    color: #67a5cd;
    padding: 7px 15px 7px 30px;
}