Python-2d形变 动画 表格

一.形变

    /*1.形变参考点: 三轴交界点*/
    transform-origin: x轴坐标 y轴坐标;

    /*2.旋转 rotate deg*/
    transform: rotate(720deg);

    /*偏移 translate px*/
    transform: translateX(200px) translateY(200px);

    /*缩放 scale 无单位*/
    transform: scale(x轴比例, y轴比例)

    /*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*/
    /*形变不改变盒子布局, 只拿形变做动画*/

二.动画animation
transition:
    一个在执行的过程中声明关键帧的动画，可以一旦元素的属性发生变化就可以形成一个动画，
    然后transition-property，transition-duration，transition-timing-function，transition-delay来设置动画的属性

animation:
    通过@keyframes 来设置关键帧，在没个关键帧中设置在该帧动画中某个元素的一个或几个属性的变化。
    animation-name，animation-duration，animation-timing-function，animation-delay，
    animation-iteration-count，animation-direction来设置动画的属性


    /*1.设置动画体*/
    @keyframes move {
        /*起点省略采用的就是初始状态*/
        0% {}
        33.3% {
            margin-left: 800px;
            /*在每一个动画节点都需要明确所有做动画属性在该节点的属性值*/
            margin-top: 50px;
        }
        66.6% {
            margin-left: 500px;
            margin-top: 300px;
        }
        /*终点需要设置*/
        100% {
            margin-left: 200px;
            margin-top: 50px;
        }
    }

    /*2.设置动画属性*/
    /*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/
    .box {
        animation: move 2s 1 linear;
    }

三.表格

    <table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>标题</th>
                <th>标题</th>
                <th>标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tfoot>
    </table>
    table的全局属性:
    border="1"  设置边框宽度
    cellspacing="10" 单元格间的间距
    cellpadding="10" 单元格的内边距
    rules="rows | cols | groups | all" 边框的保留格式

    td的全局属性
    rowspan='2' 合并两行单元格
    colspan='3' 合并三列单元格

    table的高度: 由内容和设置高度中的大值决定

    table-cell: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中

四.多行文本垂直居中

    <div class="sup">
        <p>第一行文本</p>
        <div>第二行文本</div>
    </div>

    .sup {
        /*实现多行文本垂直居中 =>
        针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
        display: table-cell;
        vertical-align: middle;
    }
    /*注: 如果想调整sup的位置,可以给sup嵌套一个"位置层"*/
    /*.box>.sup>p+div*/