html如何做滑动门效果,div+css制作简单滑动门效果

现在流行的网站设计中，水平导航菜单占据了大壁江山。的确，无论是门户网站还是企事业单位网站，都大量的采用水平的导航菜单设计。而水平导航菜单中，又有绝大多数网站采用“滑动门”设计。

首先需要确定的是，制作滑动门导航菜单效果，不需要使用JavaScript，而仅仅需要使用DIV+CSS技术即可。这对于很多人来说挺值得兴奋的，因为不需要通过JS就能完成这一功能，省却了很多的代码工作。

下面来看看代码吧：

.btn{

position: absolute;

left: 300px;

top: 100px;

height: 21px;

line-height: 19px;

color: #fff;

font-size: 12px;

overflow: hidden;

}

.btn .l{

float: left;

width: 8px;

height: 21px;

background: url(images/l.png) no-repeat 0 0;

}

.btn .c{

float: left;

font-style:normal;

background: url(images/c.png) repeat-x 0 0;

height: 19px;

}

.btn .r{

float: right;

width: 8px;

height: 19px;

background: url(images/r.png) no-repeat 0 0;

}

测试文字

效果：

1.jpg

2.jpg