纯CSS3实现动感菜单

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

原创最新推荐文章于 2023-12-11 15:39:14 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

HTML 同时被 3 个专栏收录

24 篇文章

订阅专栏

前端小实例

18 篇文章

订阅专栏

CSS3

10 篇文章

订阅专栏

本文介绍了一种使用CSS3制作的垂直动态菜单效果。通过简单的HTML结构与精心设计的CSS样式，实现了美观且互动性强的菜单。文章提供了完整的HTML与CSS代码，并展示了菜单项在鼠标悬停时的变化。

今天学了一款用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;
}