CSS3學習筆記——漸變、變形、過渡、動畫等效果——day five
目錄
一、CSS3 字首
在 CSS3 的很多新屬性推出時，這些屬性還處在不太穩定的階段，隨時可能被剔除。而 此時的瀏覽器廠商為了實現這些屬性，採用字首方法。各大廠商字首列表如下：
手機等移動端一般採用的是 IOS 或安卓系統，那麼基本上它的引擎是 webkit， 直接參考-webkit-即可。
被列入標準的 box-shadow 和 opacity 、border-radius屬性被列入標準,不需要再使用字首，所有瀏覽器都穩定支援。
未被列入標準的寫法，注意順序：
div {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
二、漸變效果
1.線性漸變
linear-gradient 屬性實現背景顏色的漸變功能。預設情況下是to bottom，從上到下。to表示最終要到達的方位。
/*通過角度設定方位，0 ~ 360 度之間，可以是負值，以第一個顏色為原點，在元素上呈現的角度*/ background-image: linear-gradient(45deg,orange,green); /*多色線性漸變，彩虹，多加幾個顏色，以顏色過渡。*/ background-image: linear-gradient(-45deg,orange,green,blue,red); /*通過百分比設定多色線性位置 */ background-image: linear-gradient(-45deg, orange 0%, green 20%, blue 40%, red 100%); /*預設情況下：起始顏色的百分比位置是 0%，末尾顏色的百分比位置是 100%，其他位置 按照平均值分配。 也可以使用 px 畫素來設定，但計算麻煩點。 結合背景，並使用透明漸變實現強大層次感，百分比多大，佔據多大*/ background-color: red; background-image: linear-gradient(to top right, rgba(0,0,0,0.6), rgba(0,0,0,0)); /*重複漸變屬性值*/ background-image: repeating-linear-gradient(to top, orange 10px, green 30px);
2.徑向漸變
radial-gradient 屬性值。它是從一個點 向四周發散的方式擴充套件。屬性值樣式表如下：
如果想設定第一個可選引數，有一種做法是設定為：
① cirlce(圓形)或 ellipse(橢 圓形)。預設是橢圓形。
background-image: radial-gradient(circle, orange, green);
② 可以設定形狀，還可以設定形狀的發散方向
background-image: radial-gradient(circle at top, orange, green);
③ 可以複合方向，比如右下方
background-image: radial-gradient(circle at right bottom, orange, green);
④ 可以設定發散的距離，即圓的半徑長度
background-image: radial-gradient(circle closest-side, orange, green);
三、邊框圖片效果
CSS3 提供了一個新的屬性集合，用這幾個屬性可以嵌入圖片形式的邊框。這樣，邊框 就可以自定義了。
1.border-image-source //引入背景圖片地址
2.border-image-slice //切割引入背景圖片，切割後不會以整張圖片做邊框，而是以圖片的一個部分。
3.border-image-width //邊框圖片的寬度 不會擠壓元素內容，內容在邊框圖片下面。
4.border-image-repeat //邊框背景圖片的排列方式
5.border-image-outset //邊框背景向外擴張
6.border-image //上面五個屬性的簡寫方式
四、變形效果
1.transform
指定應用的變換功能，平移，旋轉，縮放。
2.transform-origin
指定變換的起點，。預設情況下，使用元素的中心作為起點。
瀏覽器版本
相容完整版
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;3.3D 變形
/*相容版本完整形式*/
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
-ms-transform: translateZ(200px);
transform: translateZ(200px);4.transform-style
是指定巢狀元素如何在 3D 空間中呈現。
flat 預設值，表示所有子元素在 2D 平面呈現。
preserve-3d 表示子元素在 3D 空間中呈現。
一般設定到當前元素的父元素
transform-style: preserve-3d;
需要再配合後面的功能屬性和變形配置，才能看到效果。同樣，這個屬性也需要加上各種廠商字首。
5.perspective
設定檢視者的位置，並將可視內容對映 到一個視錐上，繼而投放到一個 2D 平面上。
在元素中設定透視的值 perspective(長度值)，但它還是和在父元 素設定有一定不同。
因為父元素整個作為透視，而元素自己作為透視，導致不同。
具體測試看透視的距離
img { transform: perspective(1000px) rotateY(45deg); }
6.perspective-origin
設定 3D 變形中的源點角度。該屬性預設 值為 50% 50%也就是 center center。
7.3D 變形屬性
運用前面 3D 功能屬性 transform-style 和 perspective 來構建 3D 變形效果。
五、過渡效果
不借助 JavaScript 來實現簡單的使用者互動功能。示例
通過CSS 動作觸發平滑過渡功能，比如：:hover、:focus、 :active、:checked 等。
1.transition-property
首先，設定過渡的第一個屬性就是指定過渡的屬性。
同樣，你需要指定你要過渡某個元素的兩套樣式用於使用者和頁面的互動。
那麼就使用 transition-property 屬性。
2.transition-duration
必須加上過渡所需的時間，因為默 認情況下過渡時間為 0。
設定過渡時間為 1 秒鐘，如果是半秒鐘可以設定為.5s transition-duration: 1s;
3.transition-timing-function
當過渡效果執行時，比如產生緩動效果。預設情況下的緩動是：元素樣式從初始狀態過 渡到終止狀態時速度由快到慢，逐漸變慢，即 ease。
4.transition-delay
設定一個過渡延遲效果，就是效果在設定的延遲時間後再執行。
5.簡寫
單獨宣告
transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
如果每個樣式都是統一的，直接使用 all
transition: all 1s ease 0s;
/*相容完整版*/
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
transition: all 1s ease 0s;六、動畫效果
animation 屬性實現了類似 Flash 關鍵幀控制的動畫效果。
之前的 transition 屬性只能通過指定屬性的初始狀態和結束狀態來實現動畫效果，有一定侷限性。所有動畫更靈活。
animation 實現動畫效果主要由兩個部分組成：
1.通過類似 Flash 動畫中的關鍵幀宣告一個動畫；
2.在 animation 屬性中呼叫關鍵幀宣告的動畫。
關鍵幀屬性：@keyframes
宣告一個動畫，然後在 animation 呼叫關鍵幀宣告的動畫。
基本格式，“name”可自定義 @keyframes name { /*...*/ }
步驟：
①先建立一個基本的樣式。
②@keyframes 宣告一個動畫關鍵幀。
/*重複可以寫一起*/
@keyframes myani {
0%, 100% { background-color: white; margin-left:0px; }
50% { background-color: black; margin-left:100px;}
}
/*從什麼狀態過渡到什麼狀態*/
@keyframes myani {
from { background-color: white; margin-left:0px; }
to { background-color: black; margin-left:100px; }
}③animation-name 呼叫@keyframes 動畫
animation-name: myani;
④animation-duration 設定動畫播放的時間 注意與延遲時間的區別
animation-duration: 1s;
簡寫形式完整版：
animation: myani 1s ease 2 alternate 0s both;
一些概念的區別：
1、animation-timing-function //設定緩動
animation-timing-function: ease-in;
animation-direction //設定緩動方向交替 ，也是播放方向的交替，不是物體運動方向，必須先設定緩動，若緩動由快到慢，則後面會由慢到快。
animation-direction: alternate;
2、animation-fill-mode //設定結束後不在返回 ，動畫播放完，預設會立即回到原位置，所以有時候需此屬性控制。
animation-fill-mode: forwards;
其中both屬性值 根據情況產生 forwards 或 backforwards 的效果，由次數和方向自動判斷最後停留位置。