CSS学习之动画

动画

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

2D3D转换

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

• tranlate()平移
• ratate()旋转
• scale() 缩放
• skew() 倾斜
  demo:
  index.htm文件内容

    
    
    


    
这是一个初始效果
    
改变后的效果

style.css文件内容：

div{
    width:100px;
    height: 100px;
    background-color: antiquewhite;

}
/*.div2{
   transform:translate(200px,100px);!*通过transform来引入*!
    -webkit-transform: translate(200px,100px);
    -ms-transform: translate(200px,100px);!*IE*!
    -o-transform: translate(200px,100px);!*opera*!
    -moz-transform: translate(200px,100px);!*firefox*!
}
.div2{
    transform:rotate(180deg);!*通过transform来引入 顺时针旋转180°*!
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);!*IE*!
    -o-transform: rotate(180deg);!*opera*!
    -moz-transform: rotate(180deg);!*firefox*!
}
.div2{
    transform:scale(1,2);!*通过transform来引入   第一个参数是宽的的倍数，第二个参数是高度的倍数*!
    -webkit-transform:scale(1,2);
    -ms-transform: scale(1,2);!*IE*!
    -o-transform: scale(1,2);!*opera*!
    -moz-transform: scale(1,2);!*firefox*!
}*/
.div2{
    transform:skew(50deg,50deg);/*通过transform来引入   第一个参数是向x轴倾斜50°，，第一个参数是向y轴倾斜50°*/
    -webkit-transform:skew(50deg,50deg);
    -ms-transform: skew(50deg,50deg);/*IE*/
    -o-transform: skew(50deg,50deg);/*opera*/
    -moz-transform: skew(50deg,50deg);/*firefox*/
}

CSS过渡

1.通过使用CSS3，可以给元素增加一些效果；
2.CSS3过渡是元素从一种样式转换成另一种样式

• 动画效果的CSS
• 动画执行的时间

3.属性：

demo：
index.html文件内容：

    
    
    


    
这是一个初始效果

style.css文件内容：

div{
    width: 100px;
    height: 100px;
    background-color: aqua;
    -webkit-transition : width 2s,height 2s, -webkit-transform 2s;
    transition-delay: 2s;

}
div:hover{
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
}

CSS动画

demo：
index.html文件内容：

这是一个初始效果

style.css文件内容：

*{
    margin: 0px;
}
div{
    width: 100px;
    height: 100px;
    background-color: aqua;
    animation: anim 5s infinite alternate;
    -webkit-animation: anim 5s infinite alternate;


}
@keyframes anim {
    0%{background-color: aqua;left: 0px;top:0px}
    25%{background-color: brown;left: 200px;top:0px;}
    50%{background-color: chartreuse;left: 200px;top:200px;}
    75%{background-color: darkgoldenrod;left:0px;top:200px;}
    100%{background-color: darkmagenta;left: 0px;top:0px;}
}
@-webkit-keyframes anim {
            0%{background-color: aqua;left: 0px;top:0px}
            25%{background-color: brown;left: 200px;top:0px;}
            50%{background-color: chartreuse;left: 200px;top:200px;}
            75%{background-color: darkgoldenrod;left:0px;top:200px;}
            100%{background-color: darkmagenta;left: 0px;top:0px;}
        }

CSS 多列

1.在CSS3中，可以创建多列来对文本或者区域进行布局
2.属性：

• column-count:分列的数量
• column-gap:分列的间隔
• column-rule:分列间隔的线及颜色

demo:
index.html文件内容

    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了
    呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了

style.css文件内容：

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

CSS瀑布流效果

demo：
style.css文件内容：

.container{
    column-width: 250px;
    -webkit-column-width: 250px;
    column-gap: 5px;
    -webkit-column-gap: 5px;
    
}
.container div{
    width: 250px;
    margin: 5px;
}