这种带有缓冲效果的代码在以前css中无法实现了需要配合jquery ,下面整理的纯CSS3伪类垂直菜单背景滑动动画效果，用法简单大家一起来看看。
主要用到了position 和 transition 属性，对低版本浏览器不兼容。
效果图如下
我们先编写基本的菜单HTML代码。
| 代码如下 |
|
|
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Work</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
|
首先清除body元素默认的样式，给网页添加一个橙色的背景。
| 代码如下 |
|
|
body{
margin: 0px;
padding: 0px;
background: #e74c3c;
font-family: 'Lato', sans-serif;
}
|
定位菜单的显示位置，这里设置菜单居中显示在网页中。
| 代码如下 |
|
|
nav{
float: none;
clear: both;
width: 30%;
margin: 10% auto;
background: #eee;
}
|
给菜单的子元素设置样式。
| 代码如下 |
|
|
nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
nav li{
float: none;
width: 100%;
}
nav li a{
display: block;
width: 100%;
padding: 20px;
border-left: 5px solid;
position: relative;
z-index: 2;
text-decoration: none;
color: #444;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
|
给不同的菜单项设置不同的左侧边框
| 代码如下 |
|
|
nav li a:hover{ border-bottom: 0px; color: #fff;}
nav li:first-child a{ border-left: 10px solid #3498db; }
nav li:nth-child(2) a{ border-left: 10px solid #ffd071; }
nav li:nth-child(3) a{ border-left: 10px solid #f0776c; }
nav li:last-child a{ border-left: 10px solid #1abc9c; }
|
设置鼠标滑动到菜单项目上的动画效果
| 代码如下 |
|
|
nav li a:after {
content: "";
height: 100%;
left: 0;
top: 0;
width: 0px;
position: absolute;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
z-index: -1;
}
nav li a:hover:after{ width: 100%; }
nav li:first-child a:after{ background: #3498db; }
nav li:nth-child(2) a:after{ background: #ffd071; }
nav li:nth-child(3) a:after{ background: #f0776c; }
nav li:last-child a:after{ background: #1abc9c; }
|
讲到了不兼容低版本浏览器了，所以目前暂时还不是非常的好用哦，在很多浏览器中是看不到效果的。
