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.代码示例如下:
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;
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-tr