Css3照片墙制作

时间：2017-02-21     来源：移动互联网学院

本实例主要给大家介绍几个css3比较绚丽和实用的动画属性，其中包括旋转，缩放等。其中特效内容为：照片随意的摆放在页面的不同位置，并且有不同角度的倾斜和相互遮挡，当鼠标移动到某一张照片上时，此照片缓慢的由倾斜状态转变为端正状态，并且放大一定比例显示在上面，鼠标移走后，又恢复为原状态。此特效不使用任何javascript，而是纯css实现。

首先准备10张图作为照片

照片以不同的位置随意摆放和旋转角度随意摆放

.container img{

padding:10px 10px 15px;

background:white;

border:1px solid #ddd;

box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);

-webkit-transition:all 0.5s ease-in;

-moz-transition:all 0.5s ease-in;

transition:all 0.5s ease-in;

position:absolute;

z-index:1;

}

.pic1{

left: 400px;

top: 0;

-webkit-transform: rotate(-5deg);

-moz-transform: rotate(-5deg);

transform: rotate(-5deg);

}

.pic2{

top: 0;

left: 600px;

-webkit-transform: rotate(-20deg);

-moz-transform: rotate(-20deg);

transform: rotate(-20deg);

}

.pic3

{

bottom: 0;

right: 0;

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

transform: rotate(5deg);

}

.pic4

{

bottom:0;

left:300px;

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

transform: rotate(-10deg);

}

.pic5

{

bottom: 0;

left: 0;

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

transform: rotate(-10deg);

}

.pic6

{

top: 0;

left:0;

-webkit-transform: rotate(10deg);

-moz-transform: rotate(10deg);

transform: rotate(10deg);

}

.pic7

{

top: 0;

left: 850px;

-webkit-transform: rotate(20deg);

-moz-transform: rotate(20deg);

transform: rotate(20deg);

}

.pic8

{

bottom: -20px;

right: 630px;

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

transform: rotate(5deg);

}

.pic9

{

top: 90px;

left: 550px;

-webkit-transform: rotate(15deg);

-moz-transform: rotate(15deg);

transform: rotate(15deg);

}

.pic10

{

left:180px;

top:20px;

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

transform: rotate(-10deg);

}

鼠标移动到某一张照片上时，照片由倾斜缓慢转变成端正，并且放大显示在上层

.container img:hover{

box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);

-webkit-transform:rotate(0deg) scale(1.20);

-moz-transform:rotate(0deg) scale(1.20);

transform:rotate(0deg) scale(1.20);

z-index:2;

}

这里用到的知识点分别是

1. box-shadow：给元素的边框添加阴影的效果

2. position：给元素定位，主要用到绝对定位

3. z-index：设置元素的上下层显示

4. transition：设置元素由样式1转变为样式2的过程所需时间

5. transform：使元素变形的属性，其配合rotate(旋转角度)、scale(改变大小)、skew(扭曲元素)等参数一起使用

终的效果如图

鼠标悬浮后