单纯使用CSS能实现滑动门效果？

html-css017

单纯使用CSS能实现滑动门效果？,第1张

可以的，纯css做滑动门有两种办法，一个利用hover伪类，另一种就是设置锚点。对应两种方式触发滑动门效果，鼠标悬浮和点击。

下面各举一例，

鼠标悬浮触发：（此例ie6下无效，因其暂不支持li:hover的伪类）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>纯CSS下拉菜单</title>

<style type="text/css">

a{

font-size:12px

text-decoration:none

color:#000000}

li ul{

display:none

margin-left:5px}

li:hover ul{

width:306px

padding:20px

height:250px

display:block

}

li:hover .fira{border-bottom:#FFFFFF 1px solid

}#kpk{

position:relative

width:420px

}

#kpk>li{

float:left

list-style:none

margin-right:20px

}

#kpk>li .fira{

border:1px #c6c6c6 solid

}

.seca{

position:absolute

z-index:1

left:-5px

top:23px

border:1px #c6c6c6 solid

height:250px

width:306px

padding:20px

height:250px

}

.fira{

width:70px

display:block

line-height:22px

background-color:white

text-align:center

z-index:2

}</style>

</head><body>

<div>

<ul id="kpk">

<li>

<a href="#" class="fira">首页</a>

<ul class="seca" rel="first">

<li><A href="#" target=_self>1.首页新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.首页最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.首页物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.首页弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.首页揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.首页美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.首页浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.首页西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.首页女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.首页建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

<li>11</li>

<li>12</li>

<li>13</li>

</ul>-->

</li>

<li>

<a href="#" class="fira">链接一</a>

<ul class="seca">

<li><A href="#" target=_self>1.链接一新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.链接一最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.链接一物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.链接一弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.链接一揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.链接一美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.链接一浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.链接一西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.链接一女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.链接一建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

<li>21</li>

<li>22</li>

<li>23</li>

</ul>-->

</li>

<li>

<a href="#" class="fira">链接二</a>

<ul class="seca">

<li><A href="#" target=_self>1.链接二新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.链接二最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.链接二物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.链接二弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.链接二揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.链接二美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.链接二浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.链接二西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.链接二女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.链接二建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

<li>31</li>

<li>32</li>

<li>33</li>

</ul>-->

</li>

<li>

<a href="#" class="fira">链接三</a>

<ul class="seca">

<li><A href="#" target=_self>1.链接三新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.链接三最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.链接三物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.链接三弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.链接三揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.链接三美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.链接三浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.链接三西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.链接三女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.链接三建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

<li>41</li>

<li>42</li>

<li>43</li>

</ul>-->

</li>

</ul>

</div>

</body>

</html>

锚点点击例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>左右布局</title>

<style type="text/css">

#nav{

width:303px

height:200px

border:1px solid #CCCCCC

}

#column a {

float:left

width:100px

border-right:1px solid #CCC

border-bottom:1px solid #CCC

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

color:#000

text-decoration:none

text-align:center

}

#contant {

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

}

</style>

</head>

<body>

<div id="nav">

<div id="column"><a href="#localnew">本地新闻</a><a href="#innernew">国内新闻</a><a href="#enterment" >娱乐新闻</a></div>

<div id="contant">

<ul id="localnew">

<li><a href="#">我喜欢CSS </a></li>

<li><a href="#">我喜欢CSS </a></li>

<li><a href="#">我喜欢CSS </a></li>

<li><a href="#">我喜欢CSS </a></li>

<li><a href="#">我喜欢CSS</a></li>

<li><a href="#">我喜欢CSS</a></li>

</ul>

<ul id="innernew">

<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="enterment">

<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>

<li><a href="#">我喜欢美工</a></li>

</ul>

</div>

</div>

</body>

</html>

楼主自行copy代码到本地查看，样式微调。。。

看你要的效果了，如果要淡入淡出的话，用display设置显示隐藏，在加个transition的过度，要左右滑动显示影藏的话，用transform或者绝对定位显示和隐藏的位子，加transition的过度

所需代码：

transition-property: all 0.3s ease 相应样式处填写

transition-duration: 1s  变换所需时间

transition-delay:3s    滑到时，需要多久开始运行

.hover

原理：

制作手机翻页效果，在制作好原网页后，另外制作一个翻页后的效果，在翻页前的DIV中写入transition-property: all 0.3s ease 和transition-duration: 1s

.hover后的样式都写好

翻页效果会变的很顺畅，利用的是CSS3 变换过渡原理。

注意：transition-delay:3s 是运行样式前的等待时间，可以不写，也可以填写时间短一点。为的就是当有两个需要变换的样式时，哪个先来，由自己决定。