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

动画

通过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

瀑布流效果

使用多列实现瀑布流效果

<div class="container">  
     <div>![](a.jpg)   
     <p>这里添加标签</p>    
    </div>   
     <div>![](b.jpg)</div>
     <div>![](c.jpg)</div>

瀑布流截图.png

效果图

瀑布流.png

CSS动画- 页面特效

必须做浏览器的适配

推荐阅读更多精彩内容