css3里怎样使div从左（无）到右（有）滑入页面 20
代码如下：
<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、丰富的页面内容
丰富的内容赋予网页生命力，用户都是喜欢有新鲜、丰富内容的网页，一个受欢迎的网页设计一定是有丰富多彩的内容吸引用户的。
丰富内容的网页对于搜索引擎也是受欢迎的，当搜索引擎每次来到我们网站进行抓取内容的时候，如果我们的网页内容保持新鲜、原创，将会很快进行收录，这对于网站整体优化排名都是有好处的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<style>
body,figure,figcaption,h2,h3,p{
margin: 0;
padding: 0;
}
.test1-img{
width: 240px;
height:10%;
overflow: hidden;
margin-left:250px;
}
figure{
position: relative;
overflow: hidden;
width: 100%;
float: left;
}
figcaption{
position: absolute;
top:0;
left: 0;
}
.test1 figcaption {
margin: 20px;
}
.test1 figcaption p{
color: #333;
font-family: 微软雅黑;
font-weight: 500;
letter-spacing: 1px;
margin-top: 10px;
text-align: center;
}
figure figcaption p{
transition: transform 5s;
}
.test1 figcaption p{
transform: translate(-100px,0px);
}
.test1:hover figcaption p{
transform: translate(150px,0px);
}
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.1s;
}
</style>
</head>
<body>
<figure>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif">
<figcaption>
<h2><font >开始</font></h2>
<p>111111</p>
</figcaption>
</figure>
</body>
</html>
为什么我这里测试没有效果？main.css是怎样的
代码修改了一下，你重新试试，main.css是一个外部样式
index
body,figure,figcaption,h2,h3,p{
margin: 0;
padding: 0;
}
.test1-img{
width: 240px;
overflow: hidden;
margin-left:250px;
}
figure{
position: relative;
overflow: hidden;
width: 100%;
float: left;
}
figcaption{
position: absolute;
top:0;
left: 0;
}
.test1 figcaption {
margin: 20px;
}
.test1 figcaption p{
color: #333;
font-family: 微软雅黑;
font-weight: 500;
letter-spacing: 1px;
margin-top: 10px;
text-align: center;
}
figure figcaption p{
transition: transform 5s;
}
.test1 figcaption p{
transform: translate(-100px,0px);
}
.test1:hover figcaption p{
transform: translate(150px,0px);
}
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.1s;
}
开始
111111
他就是多增加了很多不一样的属性，比如keyframe的帧动画，border-radius圆角属性。。box-shadow盒子阴影等等，，但是就是目前还没办法完美兼容各个浏览器。。。可以直接搜索css3度娘就好给你很多答案的~~
2023-01-13 · 百度认证:云南新华电脑职业培训学校官方账号
云南新华电脑学校
<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>
