<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>形变-动画-表格</title>
</head>
<body>
<!--1.形变-->
<style>
.box { transition: 1s; }
.box:hover {
/旋转 deg/
transform: rotateZ(720deg);
/偏移 px/ transform: translateX(100px) translateY(100px);
/缩放无单位/ transform: scale(2, 0.5);
/*三种形变本质都是对transform属性进行设置,如果具有多种形变属性,
设置给一条属性, 直接用空格隔开, 且顺序一般也会影响最终效果*/
transform: rotateZ(720deg) translateX(100px) translateY(100px) scale(2, 0.5);
/*形变会产生图层位置变化,但不影响盒子位置*/
/*形变一般不用于布局, 用于盒子动画特效*/
}
</style>
<!--2.动画-->
<style>
/*1.设置动画体*/
@keyframes moving {
0% {
/*起点*/
margin-left: 0;
margin-top: 0;
}
33.3% {
margin-left: 800px;
margin-top: 0;
}
/*强调: 在任何动画节点中,均要对每一个动画的属性进行值的明确*/
66.6% {
margin-left: 400px;
margin-top: 400px;
}
100% {
/*终点*/
margin-left: 0;
margin-top: 0;
}
}
/*2.设置动画属性*/
.box {
/*animation-name: moving;*/
/*动画名 一次动画时间 循环次数 运动曲线*/
animation: moving 1s infinite ease;
}
</style>
<!--3.表格-->
<table border="1" cellspacing="0" cellpadding="10" rules="all">
<caption>表格标题</caption>
<thead>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">单元格</td>
<!--<td>单元格</td>-->
<td rowspan="2">单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<!--<td>单元格</td>-->
</tr>
</tbody>
<tfoot>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>
<!--display: table-cell; -->
<!--文本在该显示方式的盒子中垂直居中(display, vertical-align) => 多行文本垂直居中-->
<!--注: 如果要对table-cell盒子进行布局, 可以对其添加block布局盒子的父级-->
<style>
.box {
display: table-cell;
vertical-align: middle;
}
</style>
</body>
</html>