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

你可能感兴趣的:(html如何做滑动门效果)