一.Transform（變形）
1. 2D轉換之translate位移
2D轉換：屬性：transform,屬性值：translate(X,Y),屬性值也可以分開書寫：
transform:translate(X,Y)
transform:translateX(n)
transform:translateY(n)
注意：
1.1 2D轉換中的移動translate是沿着X軸和Y軸進行移動的，對行內元素直接設置是不生效的；
1.2 translate改變元素在頁面中的位置，類似定位，但它參考自身，不是父級，不會影響到其他元素的位置，所以我們不用擔心元素脫離文檔流；所以使用最好用translate來移動，避免margin-top對其他盒子位置的影響
1.3 translate的取值可以是實際的像素值:translate(100px,200px),也可以是百分比:translate(50%,50%),如果設置的是百分比那麼移動的位置是盒子自身寬高的相對值，比如50%就是自己的寬高的一半
運用
讓盒子水平垂直居中
- 讓盒子水平垂直居中我們必須使用定位實現，
- 然後配合left： 50%； top: 50%; 和margin-left: 負自己的寬度的一半；margin-top: 負自己的高度的一半；
- 我們也可以將margin-left: -自己的寬度的一半；margin-top: -自己的高度的一半；
設置爲<fonttransform: translate(-50%,-50%);
注意：如果使用transform讓盒子水平垂直居中，盒子可以不用設置固定的寬高，當然一般情況下盒子都是有自己的固定寬高的；
2. 2D轉換之rotate – 旋轉
2.1 2D轉換之旋轉rotate
屬性：transform 屬性值： rotate(度數)；
語法：transform: rotate (度數) ----- 度數的單位是deg ；
transform:rotate(360deg);就是順時針旋轉360度
注意
- rotate後面的都是，如果是正數就是順時針旋轉，如果是負數就是逆時針旋轉；
2. rotate旋轉默認的中心點是元素的中心點
2.2 設置轉換中心點
transform-origin:X Y;
- 兩個參數X和Y之間是用空格隔開的;
- X和Y默認的轉換中心點取值爲(50% 50%);
- X和Y也可以設置實際的像素值或者方位名詞（top、bottom、left、right、center）
3. 2D轉換之scale
transform：scale(X,Y);
- 兩個參數X和Y之間是用逗號隔開的;
- X和Y的取值如果等於1表示原始大小，小於1表示縮小倍數，大於1表示放大倍數；
- X和Y如果只寫一個值表示兩個參數都是一樣；
- Scale縮放最大的優勢：可以設置轉換中心點縮放，默認是中心縮放，還不會影響其他盒子的顯示位置；
2D轉換的總結
1. 常見的2D 轉換效果：
旋轉：rotate
位移：translate
縮放： scale
2. 旋轉默認進行順時針旋轉的；
3.如果三個屬性要同時存在，我們需要用空格將各個屬性隔開，位移屬性必須寫在第一位；不然旋轉會改變座標軸的位置，導致平移位置出錯
3. 行內元素不能設置transform屬性，想要設置必須先轉換顯示模式爲塊元素或者行內塊元素；
二、 Transtion(過渡)
- 過渡屬性：transition: 屬性 動畫時間 動畫形式 延時;
- 屬性： 可以用all表示所有的屬性，也可以單個屬性設置； 動畫時間：單位 s，動畫執行的時間；
- 速度：默認 ease先慢後快，最後慢速結束，勻速 linear，還有ease-in以慢速開始 , ease-out以慢速結束 , ease-in-out以慢速開始和結束；
- 延時： 單位s，即使是0也不能省略單位，延遲動畫開始執行的時間；
誰用寫在誰身上，配合僞類使用：hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a{
text-decoration: none;
color:#333;
}
.produce li{
list-style: none;
float: left;
width: 234px;
height: 280px;
padding: 34px 0 20px;
position: relative;
transition: all .2s linear;
}
.produce li:hover .review{
opacity: 1;
height: 76px;
}
.produce li:hover {
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
transform: translate(0, -2px);
}
h3{
margin: 0 10px;
font-size: 14px;
font-weight: 400;
text-align: center;
}
.desc {
margin: 0 10px 10px;
height: 18px;
font-size: 12px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #b0b0b0;
}
.price{
font-size: 14px;
margin: 0 10px 10px;
text-align: center;
color: #ff6700;
}
.price del {
color: #b0b0b0;
}
.review{
position: absolute;
bottom: 0;
left: 0;
width: 234px;
height: 0;
overflow: hidden;
font-size: 12px;
background: #ff6700;
opacity: 0;
transition: all .2s linear;
}
.review a span {
display: block;
margin-bottom: 5px;
color: #fff;
}
</style>
</head>
<body>
<div class="produce">
<ul>
<li>
<div class="produce_img">
<a href="#">
<img src="images/mi_produce.jpg" alt="">
</a>
</div>
<h3><a href="#">小米電視4A 43英寸青春版</a></h3>
<p class="desc">
全高清屏 / 人工智能語音
</p>
<p class="price">
<span>1499</span>元
<del>1699</del>
</p>
<div class="review">
<a href="#">
<span>一如既往的好，小米情懷</span>
<span> 來自於 驚喜 的評價 </span>
</a>
</div>
</li>
</ul>
</div>
</body>
</html>
三、Animation(動畫)
CSS3動畫基本使用
-
第一步需要先定義動畫
@keyframes 動畫名稱{
0%{
開始動畫
}
100%{
結束動畫
}
} -
第二定義了的動畫需要調用才能使用生效
animation-name:動畫名稱;
animation-duration:持續時間（單位是s）;
動畫定義的是也可以用from和to來定義，的等同於0%到100%； -
動畫常用的屬性總結
| 屬性 | 描述 |
|---|---|
| @keyframes | 規定動畫。 |
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 |
| animation-name | 規定 @keyframes 動畫的名稱。（必須有我們需要調用）。 |
| animation-duration | 規定動畫完成一個週期所花費的秒或毫秒。默認是 0。（必須有）。 |
| animation-timing-function | 規定動畫的速度曲線。默認是 “ease”。 |
| animation-delay | 規定動畫何時開始。默認是 0。必須寫單位s。 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。循環是infinite； |
| animation-direction | 規定動畫是否在下一週期逆向地播放。默認是 “normal”。 alternate逆向 |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running“,暫停是paused。必須配合鼠標經過使用 |
| animation-fill-mode | 規定對象動畫時間之外的狀態。保持現狀forwards，回到起始backwards。 |
-
動畫簡寫屬性
animation: 動畫名稱 持續時間 運動曲線 何時開始（延時） 播放次數 是否反向播放 動畫結束後的狀態
例如: animation: move 5s linear 2s infinite alternate;
動畫簡寫屬性的時候，** 動畫名稱和動畫持續時間必須要書寫**，其他屬性需要就書寫不需要就省略，如果書寫動畫延時必須書寫單位s，哪怕是0s也要書寫； -
速度曲線之steps步長
步長：steps(具體的數字)
animation: 動畫名稱 steps(10) 2s forwards;
步長是設置了時間函數之間的間隔步數，規定元素在多少步完成動畫；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>animation之steps</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.content{
width: 0px;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
animation: step 2s steps(6) forwards;
}
@keyframes step{
0%{}
100%{
width: 120px;
background-color: pink;
}
}
</style>
</head>
<body>
<div class="content">
我在這裏等你
</div>
</body>
</html>
一個字大小爲20，分6步出現，width變爲120px