HTML第⼆⼗节（CSS制作照⽚墙效果与瀑布流）
CSS3制作照⽚墙
1.⽤CSS制作照⽚墙需要⽤到两个重要属性：transform和transition。transform属性允许旋转(rotate)、伸缩(scale)、倾斜(skew)或者移 动(translate)元素。transition(“过渡”)使属性值在指定时间内平滑地完成变化。可以配置4个属性：transition-property，指定过渡效果所应⽤的属性；transition-duration，指定完成变化的时间；transition-timing-function，描述属性值的变化速度，常⽤值包括ease(默认，逐渐变慢)，linear(匀速变化)，ease-in(加速变化)，ease-
out(减速变化)，ease-in-out(加速然后减速)。
2.还要⽤到⼀个重要属性是z-index，该属性配置元素堆叠顺序，属性值为数字，数值越⼤显⽰得越在上。⽤⼀个div作为⽗容器来包含所有图⽚，将position设为relative；注意要为每张图⽚分配⼀个class(必须⽤class才能实现图⽚伸缩)，为每张图⽚配置position为absolute。还需要注意不同浏览器的内核⽀持问题。
3.代码⽰例如下：
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>照⽚墙</title>
<style>
body{
background: #eee;}
.container{
width:960px;
height:450px;
html图片展示特效margin: 60px auto;
position:relative;}
img{
width:240px;
height:180px;
padding: 10px 10px 15px 10px;
border: 1px solid #ddd;
position:absolute;
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
z-index:1;}
img:hover{
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:scale(1.5);
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
box-shadow:4px 4px 10px #ccc;
-moz-box-shadow:4px 4px 10px #ccc;
-webkit-box-shadow:4px 4px 10px #ccc;
z-index:2;}
.img1{
top:50px;
left:20px;
transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
left:100px;
transform:rotate(10deg);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);}
.img3{
top:50px;
left:200px;
transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);}
</style>
</head>
<body>
<div class="container">
<img class="img1" src="m1.jpg"/>
<img class="img2" src="m1.jpg"/>
<img class="img3" src="m1.jpg"/>
</div>
</body>
</html>
瀑布流
1.HTML页⾯中⽤⼀个⼩的div来包含图⽚，再⽤⼀个⼤的div来包含所有⼩的div。
2.CSS样式中，⽤到的重要属性是column-width，浏览器窗⼝宽/column-width=显⽰列数，所以我们只需要设置⼤的div的column-width属性，再将图⽚作为块级元素显⽰，并设置适当的宽度。column-rule这个属性⽤来设置每栏的分隔线，与border类似。
3.代码⽰例：
<html lang="zh-cn">
<head>
<title>瀑布流布局CSS3</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="psb.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="m1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="index.png">
<div class="box">
<div class="pic">
<img src="m1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="index.png"> </div>
</div>
<div class="box">
<div class="pic">
<img src="psb.jpg"> </div>
</div>
<div class="box">
<div class="pic">
<img src="m1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="index.png"> </div>
</div>
<div class="box">
<div class="pic">
<img src="psb.jpg"> </div>
</div>
<div class="box">
<div class="pic">
<img src="m1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="index.png"> </div>
</div>
<div class="box">
<div class="pic">
<img src="psb.jpg"> </div>
</div>
<div class="box">
<div class="pic">
<img src="m1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="index.png"> </div>
</div>
<div class="box">
<div class="pic">
<img src="psb.jpg">
<div class="box">
<div class="pic">
<img src="index.png">
</div>
</div>
</div>
</body>
</html> CSS样式：
[css] view plaincopy
#main{
column-width:202px;
-moz-column-width:202px;
-webkit-column-width:202px;
column-rule:1px dashed #f00;
-moz-column-rule:1px dashed #f00; -webkit-column-rule:1px dashed #f00; }
.box{
padding: 10px 0 0 15px;}
.pic{
padding:10px;
border: 1px solid #ccc;
box-shadow:0 0 5px #ccc;
border-radius:5px;
width:165px;}
.pic img{
display:block;
width:165px;
height:auto;}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论