CSS-动画

1.CSS动画-2D、3D转换

(1)通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
可使用2D、3D来转换元素
(2)2D转换方法
translate(x,y);//移动偏移量
rotate(x);//旋转角度
scale(x,y);//缩放比例
skew(x,y);//倾斜角度
matrix(x);//矩阵
(3)3D转换方法
rotateX();
rotateY();

具体代码:
div{
    width: 100px;
    height: 100px;
    background-color: blue;
}

.div2{
    /*设置移动坐标*/
    /*因为各个浏览器内核不同,所以要在下面支持各个不同的内核*/
    transform: translate(100px,100px);
    -webkit-transform: translate(200px,100px);  /*Safari chrome*/
    -ms-transform: translate(200px,100px);/*IE*/
    -o-transform: translate(200px,100px);/*Opera*/
    -moz-transform: translate(200px,100px);/*Firefox*/
}
.div2{
    /*设置旋转角度*/
    transform: rotate(100deg);
    -webkit-transform: rotate(100deg);  /*Safari chrome*/
    -ms-transform: rotate(100deg);/*IE*/
    -o-transform: rotate(100deg);/*Opera*/
    -moz-transform: rotate(100deg);/*Firefox*/
}
.div2{
    /*设置缩放倍数*/
    transform: scale(0.2,0.8);
    -webkit-transform: scale(2,0.8);  /*Safari chrome*/
    -ms-transform: scale(0.2,0.8);/*IE*/
    -o-transform: scale(0.2,0.8);/*Opera*/
    -moz-transform: scale(0.2,0.8);/*Firefox*/
}
.div2{
    /*设置倾斜角度*/
    transform: skew(20deg, 50deg);
    -webkit-transform: skew(20deg ,50deg);  /*Safari chrome*/
    -ms-transform: skew(20deg,50deg);/*IE*/
    -o-transform: skew(20deg,50deg);/*Opera*/
    -moz-transform: skew(20deg,50deg);/*Firefox*/
}

2.CSS动画-过渡

通过CSS3可以给元素添加一些动画效果
属性:
transition 设置四个过渡属性
transition-property 过渡的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始时间

div{
    width: 100px;
    height: 100px;
    background-color: blue;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, transform 2s;
    transition-duration: 10s;
    transition-timing-function: ease-in;/*先慢后快,与out相反*/
    transition-delay: 2s;
}

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

3.CSS动画-动画

通过CSS3也可以进行动画的创建
CSS3动画需要遵循@keyframes规则
规定动画时长
规定动画名称
代码如下:
div{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    animation: anim 5s infinite alternate;/*infinite 重复循环  alternate这个意思是往返就是起点变终点,终点变起点*/
    -webkit-animation: anim 5s infinite alternate;
}

@keyframes anim {
    0%{
        background-color: red;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: green;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: blueviolet;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: darkorange;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: mediumturquoise;
        left: 0px;
        top: 0px;
    }
}

-webkit-@keyframes anim {
            0%{
                background-color: red;
                left: 0px;
                top: 0px;
            }
            25%{
                background-color: green;
                left: 200px;
                top: 0px;
            }
            50%{
                background-color: blueviolet;
                left: 200px;
                top: 200px;
            }
            75%{
                background-color: darkorange;
                left: 0px;
                top: 200px;
            }
            100%{
                background-color: mediumturquoise;
                left: 0px;
                top: 0px;
            }
        }

4.CSS动画-多列

(1)在CSS3中,可以创建多列来对文本或者区域进行布局
(2)属性:
column-count 一行规定的列数
column-gap 列与列之间的间距
column-rule 列与列之间线的属性

HTML代码:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="csstyle.css">
</head>
<body>
    <div>
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。
        大家好,欢迎来到我的世界,在这里你将会发现你从没发现过的东西。

    </div>

</body>
</html>

CSS代码:
div{
    /*设置并列的数量*/
    -webkit-column-count: 4;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;

    /*列之间的间隔*/
    -webkit-column-gap:30px;
    -moz-column-gap:30px;
    column-gap:30px;

    /*列之间的线的属性*/
    column-rule: 5px outset #FF0000;
    -webkit-column-rule: 5px outset #FF0000;
}


5.CSS瀑布流效果

你可能感兴趣的:(CSS-动画)