当前位置：首页 > 网页制作 > CSS > 正文

纯CSS实现滑动门效果

时间：2015-12-05 21:40:55 来源：村姑网作者：喜欢安静阅读：次
导读：我们在浏览一些比较大型的网站时会发现，他们在页面中使用了大量的滑动门效果，滑动门使网站的页面空间得到了最大化的利用，可以向访客展现尽可能多的内容，正是因为这点，这门技术才会被广泛的使用。大家一般都使用js的方法来实现滑动门，当然，纯css也是...

我们在浏览一些比较大型的网站时会发现，他们在页面中使用了大量的滑动门效果，滑动门使网站的页面空间得到了最大化的利用，可以向访客展现尽可能多的内容，正是因为这点，这门技术才会被广泛的使用。

大家一般都使用js的方法来实现滑动门，当然，纯css也是可以实现滑动门效果的，只不过单独用css来实现的话，不需要鼠标点击才可以切换，好了，下面我们就使用纯CSS来实现以下滑动门的效果，具体代码如下：

HTML代码如下：

<div id="xiaodiv"> <a href="#cssshili">CSS实例</a> <a href="#cssrumen">CSS入门</a> <a href="#cssjiqiao" >CSS技巧</a> </div> //这里设置滑动门的标题

<li><a href="#">第一个滑动门 </a></li>

</ul>

<li><a href="#">第二个滑动门 </a></li>

</ul>

<li><a href="#">第三个滑动门 </a></li>

</ul>

</div>

CSS代码如下：

#dadiv{

width:303px;

height:200px;

border:1px solid #FF0033;

}

#xiaodiv a {

float:left;

width:100px;

border-right:1px solid #9966FF;

border-bottom:1px solid #9966FF;

font:bold 14px/30px Arial, Helvetica, sans-serif;

color:#9966FF;

text-decoration:none;

text-align:center;

}

#zhongjian {

width:303px;

height:162px;

overflow:hidden;

}

ul {

margin:0;

padding:0;

list-style-type:none;

padding:4px 0 0 5px;

}

li {

font-size:12px;

overflow:hidden;

padding-left:2px;

line-height:27px;

}

至此，一个纯css滑动门已经实现了，下面是我在浏览器中浏览的效果：
纯CSS滑动门效果图

上一篇：CSS 父级与子级的关系介绍
下一篇：CSS中“#(井)号”、“*号”、“.”的区别于应用实例

看了《纯CSS实现滑动门效果》的还看了：