CSS3入门之2D、3D、过度、动画

作者: 码农修行之路 | 来源:发表于2020-12-18 23:47 被阅读0次

CSS3动画
css动画
CSS3入门之2D、3D、过度、动画
6_动画_其他属性
2019-06-11
CSS（二）
17.1.5 依旧是布局
过度动画
动画知识点
css3过度动画、变形

2D 3D 过度动画

2D效果主要是平面的一些常规操作 transform属性

移动 transform: translate(20px,30px); 水平移动和垂直移动水平沿X轴方向进行垂直沿Y轴方向进行
属性值可以为负值水平方向负值往左移动垂直方向负值往上移动
缩放 transform: scale(2, 4); 同样也是水平和垂直方向的放大缩小
旋转 transform: rotate(90deg); 默认以中心坐标旋转坐标点也可以指定指定坐标点的属性 transform-origin: 50px 100px; 或者是方位值可以是具体的像素值
倾斜 transform: skew(20deg, 30deg); 同样也是水平和垂直方向

3D 主要是有立体感实现一些炫酷的效果

旋转 transform: rotateX(50deg); transform: rotateY(50deg);等

过度从一种样式逐渐改变到另一种效果需要满足两个条件
1、添加到CSS属性上 transition: width 2s, height 2s, transform 2s; 作用于宽度、高度、2D效果上等
2、设置效果时长
动画 ->变形过度动画通过animation属性实现需要满足两个条件
1、动画名称
2、动画时长
格式：
标签 {
/* 使用动画 anim 时长 3秒 */
animation: anim 3s;
}
@keyframes anim{
属性：值；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 100px;
            height: 60px;
            background-color: red;
            /* 移动 transform */
            /* 沿X轴移动 往右移动20像素 */
            /*transform: translateX(20px);*/
            /* 沿X轴移动往左移动50像素 */
            /*transform: translateX(-50px);*/
            /* 沿Y轴移动 往下移动50像素 */
            /*transform: translateY(50px);*/
            /* 沿Y轴移动 往上移动50像素 */
            /*transform: translateY(-50px);*/
            /* 沿X轴移动 往右移动20像素 沿Y轴移动 往下移动30像素 */
            /*transform: translate(20px,30px);*/

        }

        .box1 {
            /* 旋转 */
            /*margin-left: 50px;
            margin-top: 50px;*/
            /* 顺时针旋转90度 */
            /*transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);*/
            /* 3D旋转 */
            /*transform: rotateX(50deg);
            -webkit-transform: rotateX(50deg);*/
            /*transform: rotateY(50deg);
            -webkit-transform: rotateY(50deg);*/
        }

        .box1 {
            /* 缩放 */
            /* 放大原来的倍数 不能是具体的像素值 */
            /*transform: scale(2, 4);*//*水平放大2倍 垂直方向放大4倍*/
            /* X轴放大2倍 */
            /*transform: scaleX(2);*/
            /* Y轴放大2倍 */
            /*transform: scaleY(2);
            -webkit-transform: scaleY(2);*/
        }

        .box1 {
            /* 倾斜 */
            /*transform: skew(20deg, 30deg);*//* X轴倾斜20度 Y轴倾斜30度 */
            /* X轴倾斜20度 Y轴保持不变 */
            /*transform: skewX(20deg);*/
            /* Y轴倾斜20度 X轴保持不变 */
            /*transform: skewY(20deg);*/
            /* 矩阵 */
            /*transform: matrix(1,0,0,1,30,30);*/
            /* 基于坐标点 进行旋转 其它属性都可以配合使用 */
            /*-webkit-transform-origin: 50px 100px;*/ /* 原点变化为 50 100坐标点 */
            /*transform: rotate(30deg);*/
        }

        .box1 {
            /* 过度 从一种样式逐渐改变到另一种效果 满足条件*/
            /* 1. 添加到CSS属性上 */
            /* 2. 效果时长 */
            /* 鼠标悬浮上宽高从100px到300px 过度时间2秒 旋转也是*/
            transition: width 2s, height 2s, transform 2s;
        }

        .box1:hover {
            width: 300px;
            height: 300px;
            transform: rotate(50deg);
            -webkit-transform: rotate(50deg);
        }

        .box2 {
            /* 动画 满足条件 */
            /* 1. 动画名称 */
            /* 2. 动画时长 */
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            animation: anim 3s;
            -webkit-animation: anim 5s;
        }
        @keyframes anim{
            /*from {
                background-color: #333;
            }
            to {
                background-color: yellow;
            }*/
            0% {
                background-color: #333;
                top: 0px;
                left: 0px;
            }
            25% {
                background-color: #666;
                top: 0px;
                left: 100px;
            }
            50% {
                background-color: #999;
                top: 100px;
                left: 100px;
            }
            75% {
                background-color: #0f0;
                top: 100px;
                left: 0px;
            }
            100% {
                background-color: #00f;
                top: 00px;
                left: 0px;
            }
        }

        @-webkit-keyframes anim{
            /*from {
                background-color: #333;
            }
            to {
                background-color: yellow;
            }*/
            0% {
                background-color: #333;
                top: 0px;
                left: 0px;
            }
            25% {
                background-color: #666;
                top: 0px;
                left: 100px;
            }
            50% {
                background-color: #999;
                top: 100px;
                left: 100px;
            }
            75% {
                background-color: #0f0;
                top: 100px;
                left: 0px;
            }
            100% {
                background-color: #00f;
                top: 00px;
                left: 0px;
            }
        }
        /*.box2:hover {
            animation: anim 3s;
            -webkit-animation: anim 5s;
        }*/

    </style>
</head>
<body>

    <!-- 移动 旋转 缩放 倾斜 -->

    <div class="box1">盒子</div>

    <div class="box2">盒子</div>

</body>
</html>