设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > CSS > 正文

纯CSS实现滑动门效果

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

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

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

HTML代码如下:

<div id="dadiv">

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

  <div id="zhongjian">

    <ul id="cssshili">

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

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

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

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

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

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

    </ul>

    <ul id="cssrumen">

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

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

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

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

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

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

    </ul>

    <ul id="cssjiqiao">

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

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

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

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

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

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

    </ul>

  </div>

</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实现滑动门效果》地址:http://www.cunguer.com/article/251.html,本文来自村姑网,您身边的IT专家 www.cunguer.com,转载请注明出处,您的支持是我们创作的源泉~!