轉載請注明預見才能遇見的部落格：http://my.csdn.net/
原文位址：https://blog.csdn.net/pcaxb/article/details/87251949
CSS3新特性總結
通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
1.過渡(transition)
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實作這一點，必須規定兩項内容：
(1)規定您希望把效果添加到哪個 CSS 屬性上
(2)規定效果的時長
簡寫文法：
transition: property duration timing-function delay;
transition： CSS屬性，花費時間，效果曲線(預設ease)，延遲時間(預設0)
單個文法：
transition-property 規定設定過渡效果的 CSS 屬性的名稱。
transition-duration 規定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果何時開始。
<!-- 1.過度 -->
<div class="div0 div1"></div>
<div class="div0 div2">123</div>
<div class="div0 div3">CSS3過渡</div>
/* 過渡樣式 */
.div0{
width: 100px;
height: 100px;
background-color: bisque;
}
.div1{
transition: width 2s;
}
.div1:hover{
width: 400px;
}
.div2{
transition: width 2s,height 2s,transform 2s ease;
}
.div2:hover{
width: 300px;
height: 300px;
/* 旋轉的時候一定要注意使用過度，不然可能看不出來，以為沒有旋轉 */
transform: rotate(180deg);
}
.div3{
background-color: #92B901;
color: white;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 2s ease .5s,width 2s,height 2s ease 2s;
}
.div3:hover{
width: 160px;
height: 160px;
background-color: #1ec7e6;
transform: rotate(360deg);
}
2.動畫(animation)
通過 CSS3，我們能夠建立動畫，這可以在許多網頁中取代動畫圖檔、Flash 動畫以及 JavaScript。
CSS3 @keyframes 規則 ：如需在 CSS3 中建立動畫，您需要學習 @keyframes 規則。@keyframes 規則用于建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由目前樣式逐漸改為新樣式的動畫效果。
簡寫文法：
animation: name duration timing-function delay iteration-count direction;
animation：動畫名稱，一個周期花費時間，運動曲線（預設ease），動畫延遲（預設0），播放次數（預設1），是否反向播放動畫（預設normal），是否暫停動畫（預設running）
單個文法：
animation-name 規定需要綁定到選擇器的 keyframe 名稱。。
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function 規定動畫的速度曲線。
animation-delay 規定在動畫開始之前的延遲。
animation-iteration-count 規定動畫應該播放的次數。n|infinite(規定動畫應該無限次播放)
animation-direction 規定是否應該輪流反向播放動畫。normal(正常播放)|alternate(輪流反向播放);
animation-timing-function 規定動畫的速度曲線。
1)linear 動畫從頭到尾的速度是相同的。
2)ease 預設。動畫以低速開始，然後加快，在結束前變慢。
3)ease-in 動畫以低速開始。
4)ease-out 動畫以低速結束。
5)ease-in-out 動畫以低速開始和結束。
6)cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
animation-fill-mode : none | forwards | backwards | both;
1)none：不改變預設行為。
2)forwards ：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
3)backwards：在 animation-delay 所指定的一段時間内，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
4)both：向前和向後填充模式都被應用。
當您在 @keyframes 中建立動畫時，請把它捆綁到某個選擇器，否則不會産生動畫效果。通過規定至少以下兩項 CSS3 動畫屬性，即可将動畫綁定到選擇器：
1)規定動畫的名稱
2)規定動畫的時長
<!-- 動畫 -->
<div class="div1"></div>
<div class="div2"></div>
@keyframes fd{
from {width: 100px;height: 100px;background-color: red;border-radius: 50%;}
to {width: 400px;height: 400px;background-color: greenyellow;border-radius: 50%;}
}
.div1{
animation: fd 5s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
background-color: red;
}
3.形狀轉換(transform)
下次補上
4.陰影
1.box陰影
box-shadow 屬性向框添加一個或多個陰影。該屬性是由逗号分隔的陰影清單，每個陰影由 2-4 個長度值、可選的顔色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水準陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顔色 陰影開始方向（預設是從裡往外，設定inset就是從外往裡）;
1)h-shadow 必需。水準陰影的位置。允許負值。
2)v-shadow 必需。垂直陰影的位置。允許負值。
3)blur 可選。模糊距離。
4)spread 可選。陰影的尺寸。
5)color 可選。陰影的顔色。
6)inset 可選。将外部陰影 (outset) 改為内部陰影。
2.text陰影
text-shadow 屬性向文本添加一個或多個陰影。該屬性是逗号分隔的陰影清單，每個陰影有兩個或三個長度值和一個可選的顔色值進行規定。省略的長度是 0。
text-shadow: h-shadow v-shadow blur color;
1)h-shadow 必需。水準陰影的位置。允許負值。
2)v-shadow 必需。垂直陰影的位置。允許負值。
3)blur 可選。模糊的距離。
4)color 可選。陰影的顔色。
box陰影
<div class="div2"></div>
text陰影
<div class="div3">沒有什麼</div>
.div2{
width: 100px;
height: 100px;
margin: 100px;
background-color: green;
box-shadow: 10px 10px 10px 10px greenyellow inset;
}
.div3{
font-size: 48px;
text-shadow: 2px 2px 2px red;
}
5.邊框
。。。未完，繼續
參考資料：CSS3新特性總結
CSS3新特性總結
部落格位址：https://blog.csdn.net/pcaxb/article/details/87251949