一.动画
`css
/*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;
}
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> .box { width: 100px; height: 100px; background-color: red; margin-left: 200px; margin-top: 50px; } /*实现动画*/ /*1.设置动画体*/ /*2.设置动画属性*/ /*1.设置动画体 @keyframes 动画名 { 多种状态的动画体 } */ /*2.设置动画属性 .box { animation: 动画相关属性; } */ @keyframes hehe { /*起点省略采用的就是初始状态*/ 0% {} 33.3% { margin-left: 800px; margin-top: 50px; } 66.6% { margin-left: 500px; margin-top: 300px; } /*终点需要设置*/ 100% { margin-left: 200px; margin-top: 50px; } } .box { /*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/ animation: hehe 2s 1 linear; } </style> </head> <body> <div class="box"></div> </body> </html>
二.形变
``css
/*1.形变参考点: 三轴交界点*/
transform-origin: x轴坐标 y轴坐标;
/*2.旋转 rotate deg*/
transform: rotate(720deg);
/*偏移 translate px*/
transform: translateX(200px) translateY(200px);
/*缩放 scale 无单位*/
transform: scale(x轴比例, y轴比例)
/*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*/
/*形变不改变盒子布局, 只拿形变做动画*/
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2d形变</title> <style type="text/css"> div { width: 50px; height: 50px; background-color: red; margin: 30px auto 0; text-align: center; line-height: 50px; transition: 3s; /*形变参考点: 三轴交界点*/ /*transform-origin: 0 0;*/ } .d1 { /*形变: 只操作自身显示图层(让图层发生变化), 不影响盒子布局*/ /*注: 不拿形变来布局, 只能形变来完成动画*/ /*transform: rotate(45deg);*/ /*transform: scale(3);*/ /*transform: translateY(100px);*/ /*margin-top: 50px;*/ } .d2:hover { /*旋转: 旋转的是角度 deg*/ /*transform: rotate(720deg);*/ transform: rotateZ(7200deg); } .d3:hover { transform: rotateY(7200deg); } .d4:hover { /*偏移: 偏移的是距离 px*/ /*如果需要发送多状态形变,需要分别写在一条transform属性设置中*/ /*各个形变之间用空格隔开*/ /*顺序一般会影响结果*/ /*transform: translateY(100px) translateX(100px);*/ /*不能这么书写: 所有形变效果的实现都是对transform一个属性进行设置*/ /*下方这么设置,第二次赋值会覆盖第一次赋值(只能保留最后一次赋值)*/ transform: translateX(100px); transform: translateY(100px); } .d5:hover { transform: translateX(100px) rotate(7200deg); /*transform: rotate(7200deg) translateX(100px);*/ } .d6:hover { /*缩放: 缩放的是比例 无单位*/ transform: scale(3, 0.5); /*transform: scaleX(3) scaleY(0.5);*/ } .d7:hover { transform: translateX(100px) rotate(720deg) scale(2); } .d8:hover { margin-left: 1200px; } </style> </head> <body> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> <div class="d6">6</div> <div class="d7">7</div> <div class="d8"></div> </body> </html>
三.表格
``html
<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: 可以/嵌套任意类型标签, 可以快速实现多行文本垂直居中
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> <style type="text/css"> .table1 { width: 500px; height: 500px; display: none; } th, td { padding: 20px; } .table2 td { /*border: 10px solid black;*/ } </style> </head> <body> <!-- table的display: table --> <!-- table显示规则注意点: 当设置的盒子高度不足够显示内容时, 盒子高度由内容撑开, 当设置的高度大于显示内容所需高度,采用设置的高度 --> <!-- border: 设置边框宽度 --> <!-- cellspacing: 单元格间的间距 --> <!-- cellpadding: 单元格的内边距 == th, td设置padding --> <table class="table1" border="1" cellspacing="0"> <!-- tr>th{标题}*3 --> <tr> <th>标题</th> <th>标题</th> <th>标题</th> </tr> <!-- (tr>td{单元格}*3)*3 --> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </table> <!-- 边框的保留格式 => rules: rows | cols | groups | all --> <table class="table2" border="10" rules="all"> <caption>表格标题</caption> <thead> <tr> <th>标题</th> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td rowspan="2">单元格</td> <td rowspan="2" colspan="2">单元格</td> <!-- <td>单元格</td> --> <td>单元格</td> </tr> <tr> <!-- <td>单元格</td> --> <!-- <td>单元格</td> --> <!-- <td>单元格</td> --> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <tr> <td>单元格</td> <td colspan="2">单元格</td> <!-- <td>单元格</td> --> <td>单元格</td> </tr> </tfoot> </table> <!-- >>> display: table-cell => 可以嵌入任意类型标签, 可以快速实现多行文本垂直居中 --> </body> </html>
四多行文本垂直居中
```html
<div class="sup">
<p>第一行文本</p>
<div>第二行文本</div>
</div>
```
```css
.sup {
/*实现多行文本垂直居中 =>
针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
display: table-cell;
vertical-align: middle;
}
/*注: 如果想调整sup的位置,可以给sup嵌套一个"位置层"*/
/*.box>.sup>p+div*/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多行文本垂直居中</title> <style> p { margin: 0; } .box, .b1 { width: 150px; height: 150px; margin: 10px auto; background-color: pink; text-align: center; } .b3 { line-height: 150px; } .b2 { line-height: 150px; /*不起作用*/ /*vertical-align: middle;*/ } .b1 { /*实现多行文本垂直居中 => 针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/ display: table-cell; vertical-align: middle; } </style> </head> <body> <div class="box"> <div class="b1"> <p>好的</p> <p>真好</p> <div>好的</div> <div>真好</div> </div> </div> <div class="box b2"> <p>好的</p> <p>真好</p> </div> <div class="box b3">好的真好好的真好好的真好好的真好</div> </body> </html>