前端(八)之形變
阿新 • • 發佈: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*/