代码如下：
<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，，只是用css3定义好动画，
@-moz-keyframes tips {
0% {box-shadow: 0px 0px 0px #f00}
25% {box-shadow: 0px 0px 8px #f00}
50% {box-shadow: 0px 0px 0px #f00}
100% {box-shadow: 0px 0px 8px #f00}
}
然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。
.tips {
-webkit-animation:tips 1s
-moz-animation:tips 1s
}
当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。
animation实现动画由俩个部分组成，通过类似flash动画的关键帧来申明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
关键帧 例如：
调用关键帧：
语法 animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
animation-name 由 @keyframes 创建的动画名称
animation-duration过渡时间
animation-timing-function过渡方式
animation-delay延迟时间
animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放
animation-direction动画的播放方向，alternate为偶数次向前播放，normal动画每次都是循环向前播放
练习如下：
该图形的变化从左上角到右上角来回跳动的一个过程
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
perspective:500px透视 也可以理解为视距，可以理解为 你的眼睛距离物体的距离 距离物体越近 物体就越大，距离物体越远 物体就越小
transform: rotateZ(30deg) rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转
transform: rotateY(30deg) rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotateX(30deg)rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转
transform: translate3d(0, 0, 200px)效果如下:
translate3d(0,0,200px) 表示z轴向前移动二楼200px（近大远小的原理）
translate3d 里面分别表示x轴距离 y轴距离 和z轴距离
要想实现3d效果必须要在父元素上加上一个属性perspective
如果想让子元素有3d的效果 必须要给父元素设置transform-style，默认值是flat， 想变成3d效果要把值设置成preserve-3d
也可以 设置旋转后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right
