单纯使用CSS能实现滑动门效果？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单纯使用CSS能实现滑动门效果？相关的知识，希望对你有一定的参考价值。
不使用javascirpt语言，就单纯的CSS代码，能实现滑动门效果吗？
可以的，纯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/html; charset=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 .firaborder-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代码到本地查看，样式微调。。。 参考技术A 单纯CSS实现滑动效果有两种方式：1、hover伪类 2、锚点(html+css)
使用:hover伪类
标签元素css样式中设置一个位置，伪类中设置另一个位置，当鼠标经过时，css发生变化，由此实现滑动门效果
使用锚点
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。由此达到滑动门效果。 参考技术B JS也很简单，就一句语法何必用CSS一堆代码！
控制z-index或display都OK你觉得呢？ 参考技术C 能啊
css 一口气实现切角+边框+投影+内容背景色渐变
单纯用css实现切角+边框+投影+内容背景色渐变所有效果，因为UI没给背景切图，寻思这个理论上用css就能实现。
看一下最终要实现的效果：
首先不谈内容紫蓝色渐变，一个单纯的四切角+黑色边框+轮廓投影，其实就直接用网上铺天盖地的background:linear-gradient 实现切角+ 套一层小了1px的伪元素实现边框 + filter: box-shadow实现投影就行了，效果和代码如下：
<html>
<body>
<div class="box"></div>
</body>
<style>
body {
background-color: #55486b;
}
.box {
margin: 20px;
width: 200px;
height: 200px;
z-index: 0;
background: linear-gradient(
135deg,
transparent calc(10px + 1 * 0.414px),
#18121a 0
)
top left,
linear-gradient(
-135deg,
transparent calc(10px + 1 * 0.414px),
#18121a 0
)
top right,
linear-gradient(-45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
bottom right,
linear-gradient(45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
bottom left;
background-size: 55% 50%;
background-repeat: no-repeat;
position: relative;
filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.3));
}
.box::after {
z-index: 1;
width: calc(100% - 2 * 1px);
height: calc(100% - 2 * 1px);
content: "";
display: block;
background: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top left,
linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
background-size: 55% 51%;
background-repeat: no-repeat;
position: absolute;
left: 1px;
top: 1px;
}
</style>
</html>
相当于四个角斜方向用一小段透明色+一大段背景色拼凑起来实现的切角，background-size要大于50%以免有白色线bug。大的div里再套一层小的伪元素实现边框。但由于是四块背景色拼起来的，所以要实现整个内容渐变看起来不可能了。
要实现内容区域也是渐变的，那么换种思路，之间里面那层伪元素background是渐变的，四个切角通过其他属性来切掉，这样就有其他的实现方法了，先来看看：
方法一：mask遮罩
其他东西不变，之前伪元素那块是和外层一样的思路实现切角，这种思路下是无法做到垂直渐变的（因为切角已经是通过斜对角透明色渐变做的），那么直接把背景色写成渐变，通过mask遮罩属性来将四个切角变透明：
.box::after {
z-index: 1;
width: calc(100% - 2 * 1px);
height: calc(100% - 2 * 1px);
content: "";
display: block;
background: linear-gradient(180deg, #3c2f4f, #2e2269);
-webkit-mask: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top
left,
linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
-webkit-mask-size: 55% 51%;
-webkit-mask-repeat: no-repeat;
position: absolute;
left: 1px;
top: 1px;
}稍许更改一下上面的代码里伪元素的样式，就实现了。
方法二：clip-path
clip-path属性可以直接修剪掉元素周围的边界，如果直接运用在上面伪元素，会发现投影也被遮盖了，那么换个思路，我们索性不要伪元素那一层，直接把div修剪出4个切角。因为filter属性可以叠加，将其父元素添加filter，前n+1个drop-shadow叠加起来形成一个类似黑色边框，最后一个drop-shadow来实现浅白色投影。效果如下：
<html>
<body>
<div class="outer">
<div class="box"></div>
</div>
</body>
<style>
body {
background-color: #55486b;
}
.outer {
filter: drop-shadow(0px 0px 1px #18121a) drop-shadow(0px 0px 1px #18121a)
drop-shadow(0px 0px 1px #18121a)
drop-shadow(2px 1px 3px rgba(255, 255, 255, 0.3));
}
.box {
margin: 20px;
width: 200px;
height: 200px;
border-radius: 12px;
position: relative;
background: linear-gradient(180deg, #3c2f4f, #2e2269);
-webkit-clip-path: polygon(
20px 0%,
calc(100% - 20px) 0%,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px
);
clip-path: polygon(
20px 0%,
calc(100% - 20px) 0%,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px
);
position: relative;
}
</style>
</html>
不知道还有没有更简单且兼容性更好的方法~~~~
以上是关于单纯使用CSS能实现滑动门效果？的主要内容，如果未能解决你的问题，请参考以下文章