像这种需求你可以用js或者jQuery编写。
如果不想使用js或者jquery，那么用css的过渡属性代码如下：
鼠标滑入，出现效果
transition: right .7s ease
right为过渡的属性，可以是宽高，top/lelft/right/bottom/opacity等等。只要记住transition不能过渡display就行。
.7s 为过渡所需要的时间，ease为过渡的样式，是匀速过渡还是先快后慢等等。
如果没有鼠标事件，那么就需要用到css3的动画，animation。css3的动画详情卡查看https://mengkedu.com/
代码如下：
<h1>CSS3滑入/滑出效果</h1>
<div id="volet_clos">
<div id="volet">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<a href="#volet" aria-hidden="true" class="ouvrir">滑出</a>
<a href="#volet_clos" aria-hidden="true" class="fermer">滑入</a>
</div>
</div>
扩展资料
web网页设计的重要注意事项：
1、网页版面设计合理性
网页设计过程中，一定要留意网页版式的合理性，通过合理的网页布局让用户浏览起来比较顺畅舒适，注意网页版式的设计，不要块块之间过于冗繁，显示拥挤，要有主次分明，注意简练大方。
2、运用舒缓的色彩设计
在网页色彩搭配上，采用淡色系进行页面设计，特别要注意颜色的分配，总体颜色不宜超过三种颜色，可以确定一个主颜色再加上辅助颜色进行点缀搭配，这样整体设计展现出来比较调和、舒缓，用户浏览页面也不会导致眼花缭乱，眼睛疲劳。
3、丰富的页面内容
丰富的内容赋予网页生命力，用户都是喜欢有新鲜、丰富内容的网页，一个受欢迎的网页设计一定是有丰富多彩的内容吸引用户的。
丰富内容的网页对于搜索引擎也是受欢迎的，当搜索引擎每次来到我们网站进行抓取内容的时候，如果我们的网页内容保持新鲜、原创，将会很快进行收录，这对于网站整体优化排名都是有好处的。
css3中的变形Chrome和safai需前缀加-webkit-，Foxfire需加前缀-moz-
1,旋转 rotate()
div{
width: 300px
height: 300px
transform:rotate(20deg)
}
2,扭曲 skew()
div {
width: 300px
height: 300px
transform:skew(45deg,-10deg)
}
3,缩放 scale()
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
也可以只缩放 x轴，或只缩放y轴。
div {
width: 200px
height: 200px
background: orange
}
.wrapper div:hover {
opacity: .5
transform: scale(0.8)
}
4,位移 translate()
translate()函数可以将元素向指定的方向移动，类似于position中的relative。
或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，
而不影响在X、Y轴上的任何Web组件。
5，原点 transform-origin
CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素
原点不在元素的中心位置，以达到需要的原点位置。
div {
transform: skew(45deg)
transform-origin:top
}
6,过渡
div {
width: 200px
height: 200px
background: red
margin: 20px auto
-webkit-transition-property: all
transition-property: all //指定过渡或动态模拟的css属性 （all是指所有）
-webkit-transition-duration:5s
transition-duration:5s //指定完成过渡的时间
-webkit-transition-timing-function: linear
transition-timing-function: linear//指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1
-webkit-transition-delay: .18s
transition-delay:.18s //指定开始出现的延迟时间
}
div:hover {
width: 400px
height:400px
}
7，Keyframes被称为关键帧，css3中以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{...}”
@keyframes changecolor{
0%{
background: red
}
20%{
background:blue
}
40%{
background:orange
}
60%{
background:green
}
80%{
background:yellow
}
100%{
background: red
}
}
div {
width: 300px
height: 200px
}
div:hover {
animation: changecolor 5s ease-out .2s
}
等价于
div:hover{
animation-name:changecolor
animation-duration:5s
animation-timing-function:ease-out
animation-delay:1
animation-iteration-count:infinite//动画播放次数 整数。
animation-play-state:paused//主要用来控制元素动画的播放状态。
animation-direction:alternate//动画方向，normal每次循环向前，alternate偶次向前，奇数相反。
animation-fill-mode: both//设置动画时间外属性none、forwards、backwords和both
}
