CSS3实现滑出滑入左侧菜单

时间：2022-06-25 09:00:00 编辑：袖梨来源：一聚教程网

有时候我们需要在网站上的边栏上放一个客户帮助的表单，开始是放一个按钮在那里，点击之后滑出内容来，一般这种效果我们会用js来控制。现在CSS3也可以做到了哦。

这个是怎么做到的呢？那就要用到CSS3里面的:target这个标签了。

之前我也写过相类似用到:target的动画。比如：CSS3手风琴的两种制作方案超酷的CSS3幻灯片效果

下面我们一起看看这个动画的实现思路。

1.固定这个盒子在某个位置。

2.把表单隐藏在里面，只露出一个点击按钮。

3.点击按钮时表单画出来，同时按钮文字改变

4.再次点击按钮，表单缩进去了。

思路出来了，我们可以看到，这里面需要两个步骤，一个出来，一个缩进，那我们要用:target的话，显然需要两个目标了。不然是无法完成两个动作的，当然你可以考虑用之前在手风琴案例里面提到:checked这个标签来制作。这里就不说了。

HTML代码

代码如下

复制代码

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .

vero labore voluptates necessitatibus ut? Et

CSS代码

代码如下

复制代码

#volet {
width: 250px;
padding: 10px;
background: #6B9A49; color: #fff;
}

#volet a.ouvrir,
#volet a.fermer {
padding: 10px 25px;
background: #555;
color: #fff;
text-decoration: none;
}

#volet {
position: absolute;
left: -270px; /* test fixed + scroll, on retire la position top */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
transition: all .5s ease-in;
}
#volet a.ouvrir,
#volet a.fermer {
position: absolute;
right: -88px;
top: 150px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
}
#volet a.fermer {
display: none;
}
#volet:target {
left: 10px;
}

/* code pour la fermeture */

#volet:target a.fermer {
display: block;
}
#volet:target a.ouvrir {
display: none;
}
#volet_clos:target #volet {
left: -270px;
}

/* test fixed + scroll */
#volet_clos {
position: fixed;
top: 55px; left: 0;
}

如果用:checked的话那就变得简单了。你会怎么做呢？

代码如下

复制代码

滑入滑出动画

滑入滑出

点击出来，再点击隐藏

Lorem Elsass ipsum r茅chime amet sed bissame so libero. DNA, leo Richard?Schirmeck tellus

Wurscht elementum semper tellus s'guelt Pfourtz?!

推荐专题

最新下载

热门教程

CSS3实现滑出滑入左侧菜单

滑入滑出

点击出来，再点击隐藏

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程