一、形变
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: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中
原文地址:https://www.cnblogs.com/gongcheng-/p/10139877.html
时间: 2024-10-02 10:36:43