Code CSS实现动态导航栏 css 编程 html html小技巧 18次访问 01-24 22:59 美化导航栏一来可以让网站显得不那么死板，二来也能提高游客的访问效率。 话不多少直接上效果  这个效果首先可以拆分成两部门： - 文字移动 - 窗格显示 ####文字移动 1. 文字移动十分简单，首先加入transtion组件，增加过度效果 ```css #sidebar a{ color: #fff; transition:all .4s ease; } ``` 1. 然后在父级添加“：hover”,改变padding-right实现平移效果。 ```css #sidebar li:hover a{ padding-right: 15px; } ``` [========] ####窗格显示 首先排除使用“border-right” - 一是border的边框会很大，不能调整； - 二是border的动画效果很难实现； 1. 这里我们使用“：after”在文本后加入一个空文本，通过改变该文本的定位、长宽以及颜色。 **注意**：这里使用的父级定位absolute，这里a的标签的父级也一定要有position（值为relative即可），不然top,和right会作用到根节点上。导致：after跑到奇奇怪怪的位置上。 ```css #sidebar a:after{ content:""; position: absolute; right: 0; top:10%; width:4px; height:0px; background: transparent;//背景色为透明 transition:all .4s ease; } //这里的li是a标签的父级 #sidebar li{ ...... position: relative; } ``` 1. 加入：hover，需要改变的是高度height和背景颜色backgr； ```css #sidebar li:hover a:after{ background: #fff; height: 80%; } ``` 这里的height和上一个代码块中的top值都有调整，是为了契合文字的大小。 这里数值的意思是高度缩短了10%且和文字水平对齐。有精力还可以补充下其他浏览器的适配。 大功告成~ < 【HTML小技巧】单击a标签弹窗确认实现 【Knuth洗牌算法】如何在多个值中不重复的抽取任意个数？ > 让浏览器记住我！
