您的位置：首页 > Web前端 > CSS

网页Css知识之百叶窗相册

2017-07-20 17:58 197 查看
先上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>

<style type="text/css">
*{
/*border: solid 1px black;*/
padding: 0;
margin: 0;
}
.container{
width: 805px;
height: 320px;
list-style: none;
margin: 100px auto;
/*margin上下100px,左右自动*/
overflow: hidden;
/*当图片溢出时,自动隐藏*/
box-shadow: 1px 1px 6px 1px #444;
/*图片下面的阴影,前两个为XY坐标，第三个为虚化值
* 第五个为颜色，相当于一个图形下面的色块*/
/*第四个为向外扩散多少个像素，扩散距离*/

}

.container li{
width: 160px;
height: 320px;
float: left;

border-left: solid 1px white;
box-shadow: -3px 0px 20px #222;
/*只能看到左边的阴影,所以只改左边的参数*/
position: relative;
transition: all 1s;
/*为了使鼠标本元素（图片）离开时有特效显示*/
}

.container li .footer{
/*对于图片下面设计的一层黑色半透明遮罩的设计*/
width: 100%;
/*为了让其宽度与父元素一样*/
height: 60px;
background: rgba(0,0,0,0.5);
/*rgba为设置背景颜色,与rgb用法不同*/
position: absolute;
/*让色块覆盖在图片之上,且图片必须设置为相对定位*/
left: 0; bottom: 0;

color: white;
font-weight: bold;
line-height: 60px;
/*行高,为了设置上下居中*/
padding-left: 30px;
/*为了让字体在左边*/
transition: all 0.9s;
/*设置半透明遮罩的变化时间*/
}

.container:hover li{
width: 40px;
/*transition: all 1s;*/
/*为了使鼠标离开时有特效显示,
* 将此句话移动到上面元素属性内*/
}

.container li:hover{
width:640px;
/*transition: all 1s;*/
/*为了使鼠标离开时有特效显示,
* 将此句话移动到上面元素属性内*/
}

</style>

<body>
<ul class="container">
<li>
<img src="img/img1.jpg" />
<div class="footer">《Kung Fu Panda》</div>
</li>
<li>
<img src="img/img2.jpg" />
<div class="footer">《Toy Story》</div>
</li>
<li>
<img src="img/img3.jpg" />
<div class="footer">《Wall E》</div>
</li>
<li>
<img src="img/img4.jpg" />
<div class="footer">《Flying house》</div>
</li>
<li>
<img src="img/img5.jpg" />
<div class="footer">《Cars》</div>
</li>
</ul>
</body>
</html>


下面是具体的效果展示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html 入门 动态 特效
相关文章推荐
新的分享
章节导航