纯CSS3实现动感菜单

谁借莪１个温暖的怀抱￠ 2022-06-16 14:10 173阅读 0赞

今天学了一款用CSS3实现的垂直的动感菜单，附上效果图：  
![这里写图片描述][SouthEast]  
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; }

[SouthEast]: /images/20220616/016f5e291f1640e6ad9a6fe0d90ebdef.png

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关纯CSS3液态胶合效果环形菜单特效

![04c3fc73f3f20b30c1429e393b7db64d.png][] 点击上方蓝字关注我哦 ![1a0ad430e00e15c3f7e50869ab3a1c3

秒速五厘米/ 2022年12月08日 06:04/ 0 赞/ 140 阅读

相关纯css html代码,纯css3实现文字动画

先上代码，代码如下： css3动画 - daimami.com 示例文字关于一些属性的说明： css3中的动画功能分为transitions功能和animations

心已赠人/ 2022年10月06日 12:45/ 0 赞/ 186 阅读

相关纯css实现固定在网页底部菜单导航

原文：[纯css实现固定在网页底部菜单导航][css] [源代码下载地址][css] ![20140502223118727.jpg][] [css]: http:/

悠悠/ 2022年09月21日 13:23/ 0 赞/ 149 阅读

相关纯css3响应式3d翻转菜单

前端开发whqet,csdn,王海庆,whqet,前端开发专家周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单，3d响应式菜单，希望对大家有所帮助。 ![SouthE

悠悠/ 2022年08月26日 15:20/ 0 赞/ 160 阅读

相关纯CSS3实现动感菜单

今天学了一款用CSS3实现的垂直的动感菜单，附上效果图： ![这里写图片描述][SouthEast] HTML代码： <ul class="navList">

谁借莪１个温暖的怀抱￠/ 2022年06月16日 14:10/ 0 赞/ 174 阅读

相关如何用纯 CSS 绘制一个充满动感的 Vue logo

![1504257-20181123141024274-1339330970.png][] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当

末蓝、/ 2022年04月14日 02:47/ 0 赞/ 589 阅读

相关 web中用纯CSS实现筛选菜单

web中用纯CSS实现筛选菜单本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果，例子虽然没有淘宝那样强大，不过原理差不多，如果花点心思也可以实现和淘宝一样的。内容过

落日映苍穹つ/ 2022年03月30日 06:16/ 0 赞/ 232 阅读

相关 CSS3方式实现动画菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淡淡的烟草味﹌/ 2022年01月27日 12:07/ 0 赞/ 182 阅读

相关纯 CSS3 实现波浪效果

1.使用linear-gradient来做小波浪线 ①原理: linear-gradient(45deg, red, transparent 45%) 是个渐变

水深无声/ 2021年09月14日 15:42/ 0 赞/ 1102 阅读

相关纯css制作三级菜单

![20170307091332300][] 一.注意点： 1.选择器的使用 ①element1>element2：如果元素element2不是父元素element1的直

小灰灰/ 2021年09月12日 01:36/ 0 赞/ 352 阅读