代码如下：
<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、丰富的页面内容
丰富的内容赋予网页生命力，用户都是喜欢有新鲜、丰富内容的网页，一个受欢迎的网页设计一定是有丰富多彩的内容吸引用户的。
丰富内容的网页对于搜索引擎也是受欢迎的，当搜索引擎每次来到我们网站进行抓取内容的时候，如果我们的网页内容保持新鲜、原创，将会很快进行收录，这对于网站整体优化排名都是有好处的。
不会今日学习内容：2D转换之位移、旋转(包括旋转原点的设置)、缩放、倾斜；3D转换之位移、旋转、缩放、倾斜。
总结如下要点：
(一)2D转换
(若想看到变换效果，要给图形的盒子设置过渡transition:3s)
1.位移
语法=>transform:translate(x,y)
其中x表示水平方向的位移(即左右)，y表示垂直方向的位移(即上下)。
括号内最多只能有2个值，当只有1个值的时候表示水平位移。
值的大小可以为正数，也可以为负数。当值为负数的时候向反方向移动。
值的单位可以为像素(如100px，-100px)，也可以为百分比(如50%，-50%)。当值用百分比来表示的时候，参照的是元素translate所在盒子的大小。
translate属性不脱标！
2.旋转
语法=>transform：rotate()
括号内表示旋转的角度，必须使用单位deg。
当括号内的值为正数时，表示顺时针旋转；为负数时，表示逆时针旋转。
