第六十二天 形变 动画 与 表格

Posted 2021-01-28 gongcheng-

一、形变

　　1.形变参考点：三轴交界点

　　transform-origin:x轴坐标 y坐标；

　　2.旋转 rotate deg

　　transform:rotate(720deg);

　　偏移translate px

　　transform:translateX(200px) translateY(200px);

　　缩放 scale 无单位

　　#注：可以多形变，空格隔开书写在一条transform属性中，顺序一般会形象形变结果

　　形变不改变盒子布局，只拿形变做动画

二.动画animation

　　#1.设置动画体

　　七点省略采用的就是初始状态

　　0%{}

　　33.3%{

　　　　margin-left:800px;

　　　　#在每一个动画界点都需要明确所有做动画属性在该节点的属性

　　　　margin-top:50px;

　　}

　　# 终点需要设置

　　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: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中