CSS-形變 動畫 表格
阿新 • • 發佈:2018-12-17
/*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
/*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*/