css3实现绚丽照片墙

css3实现绚丽照片墙

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

需求分析

1. 用10张图片作为照片。
2. 照片以不同的位置和旋转角度随意摆放。
3. 鼠标移动到某一张照片上时，此照片由倾斜缓慢旋转成端正，并且放大显示在最上层。

要点分析

1. 每张照片的位置是不一样的
2. 每张照片有一定的倾斜角度
3. 照片能够缓慢的旋转
4. 照片能够缓慢的放大

技能要点

1. box-shadow：给元素的边框添加阴影的效果
2. position：给元素定位，主要用到绝对定位
3. z-index:设置元素的上下层显示
4. transition：设置元素由样式1转变为样式2的过程所需时间
5. transform：使元素变形的属性，其配合rotate(旋转角度)、scale(改变大小)、skew(扭曲元素)等参数一起使用

原理分析

（一）照片墙以一定倾斜角度随意摆放原理：

1. 使用绝对定位position:absolute将照片放在不同的位置
2. 使用css3属性transform：rotate()，将各个照片旋转不同的角度

（二）鼠标移到照片上，照片缓慢旋转并且放大的原理：

1.使用css3属性transform：rotate(0deg)，可以将倾斜的照片角度旋转为0，即把照片旋转端正。
2.使用css3属性transform：scale()，将照片放大一定比例。
3.使用css3属性transition，将以上的变化设置为在一定时间内完成，从而达到缓慢变化的效果。

（三）鼠标移到照片上照片显示在最上层的原理：

设置了绝对定位的元素可以通过z-index属性控制其显示的层次关系。将要显示在最上层的照片的z-index值设置得比其他照片大即可。

主要的两个部分就是

.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;
}

.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;
}

附录：CSS3 transform是什么？

transform的含义是：改变，使…变形；转换

CSS3 transform都有哪些常用属性？

下面一张图说明问题

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

下面我们来分解各个属性的用法：

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

.demo_transform1{-webkit-transform:rotate(10deg);
                -moz-transform:rotate(10deg)}

transform:skew()：

含义：倾斜；

.demo_transform2{-webkit-transform:skew(20deg);
-moz-transform:skew(20deg)}

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

.demo_transform3{-webkit-transform:scale(1.5);
        -moz-transform:scale(1.5)}

transform:translate()：

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform4{
-webkit-transform:translate(120px,0);
-moz-transform:translate(120px,0)
}

transform综合：

transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例：

.demo_transform5{
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out
}
.demo_transform5:hover{
-webkit-transform:rotate(360deg) skew(-20deg)  scale(3.0)  translate(100px,0);
-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)；
}

transform属性要是加上transition的过渡特性，那可就是如虎添翼，樱木花道配上流川枫啊，可以产生不少美妙的火花

CSS3 transition属性其作用是：平滑的改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。于是乎，只要一个整站通用的class，就可以很轻松的渐进增强地实现动画效果，超有实用价值的说。

话说Transitions这厮

ransition有下面些具体属性：

transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如下面这个很简单的例子：

.trans {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

如果要transition 多个属性应该怎么写呢？

transition: width, height 1s ease;

这么写是错误的，要这么写；

transition: width 1s ease, height 1s ease;

如果很多，不好写，可以写成如下形式

transition: all 1s ease;

Animation属性介绍

Animation属性是一个简写属性，用于设置六个动画属性：

两个必要属性：

1、animation-name     动画名称（关键帧名称）
2、animation-duration 动画持续时间

其他属性值：

3、animation-timing-function 动画运动形式
4、animation-delay 动画延迟
5、animation-iteration-count 重复次数
6、animation-direction 动画的播放方向
7、animation-play-state 播放状态（ running 播放 和paused 暂停 ），可以用来控制动画暂停。

参数语法：

1、animation-name: IDENT;

此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。

2、animation-duration: time;

animation-duration动画所持续的时间长，取值:为数值，单位为s （秒.）其默认值为“0”。

3、animation-timing-function: ease;ease-in;ease-in-out;linear;cubic-bezier

动画的运动形式。具有以下六种变换方式：ease/ease-in/ease-in-out/linear/cubic-bezier。

4、animation-delay:time;

动画开始（延迟）时间。取值为为数值，单位为s(秒)，其默认值也是0。

5、animation-iteration-count: infinite/number；

动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。

6、animation-direction: normal /alternate

动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

7、animation-play-state: running/paused

主要是用来控制元素动画的播放状态。其主要有两个值，running（播放）和paused（暂停）其中running为默认值。这个属性目前很少内核支持。

简写语法： animation: myani 1s ease 2 alternate 1s both;
参数意义： 名称 缓动时间 缓动形式 轮播几次  交替轮播  延迟播放时间  停止播放 

举个例子

@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

CSS animation 与 CSS transition 有何区别

Transition作用是指定了某一个属性（如width、left、transform等）在两个值之间如何过渡，他包括transition-property、transition-duration、transition-timing-function、transition-delay等。

如果某一个元素指定了Transiton，那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。

Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的，与Transition不同的是，Animation可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。另外一个区别是Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别，也决定了二者各有春秋。

Animation模块包括了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-play-state等属性。

其实说这么多，一句话就是：Transform和width、left一样，定义了元素很多静态样式，只不过通过Transition和Animation指定如何改变不同的属性值，才实现了动画。

参考：http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/