CSS动画- 页面特效

• 2D、3D转换
• 过渡
• 动画
• 多列

2D、3D转换

1.通过CSS3转换，我们能够对元素进行移动、缩放，转动，拉长或者拉伸。转换是使元素改变形状、尺寸和位置的一种效果。 可以使用2D、3D来转换元素

• 2D转换方法：
  translate（）
  rotate（）
  scale（）
  skew（）
  matrix（）
• 3D转换方法
  rotateX（）
  rotareY（）

.div2{
transform: translate(100px,100px);
-webkit-transform: translate(200px,100px);/*sarari chrome*/
-ms-transform: translate(200px,100px);/*IE*/
-o-transform: translate(200px,100px);/*opera*/
-moz-transform: translate(200px,100px);/*Firefox*/
transform: rotate(200deg);
transform: scale(1,2);/* 宽、高倍数*/
transform: skew(20deg,20deg);/* X轴、Y轴的旋转角度,用作倾斜变换*/
transform: rotateY(120deg);

}

倾斜.png

过渡

过渡.png

简单看一个鼠标放在div上的动画效果：

div{   
    width: 100px;
    height: 100px;  
     background-color: blue; 
       transition: width 2s ,height 2s,transform 2s;  
      transition-delay: 2s;
}
div:hover{    
   width: 200px;    
   height: 200px; 
   transform: rotate(360deg);
}

效果图：

tanstion.gif

动画

1. 通过CSS3，也可以进行创建动画了
   2.CSS3的动画需要遵循@keyframes规则：规定动画的时长，规定动画的名称

动画.png

动画.gif

多列

在CSS3中，可以创建多列来对文本或者区域进行布局
属性： column-count //列数
column -gap //列间距
column- rule // 列中间的线，线的形状

必须做浏览器的适配

.div2{  
  column-count: 3;  
  -moz-column-count: 3;    -moz-column-gap: 30px;    -moz-column-rule: 5px outset #FF0000;    column-gap: 30px; 
   column-rule: 5px outset #FF0000;
}

多列.png

瀑布流效果

使用多列实现瀑布流效果

  
     
![](a.jpg)   
     
这里添加标签
    
    
   
     
![](b.jpg)
     
![](c.jpg)

瀑布流截图.png

效果图

瀑布流.png