學習02-css（動畫的製做，瀏覽器私有前綴，meta視口標籤，背景縮放）

css動畫

1.先定義動畫，用keyframes定義動畫（相似定義類選擇器）

@keyframes 動畫名稱 {
            0% {
                width: 100px;
            }
            100% {
                width: 200px;
            }
        }

2.再使用調用動畫

animation-name: 動畫名稱;	調用動畫
animation-duration: 持續時間;	持續時間
animation-timng-function	規定動畫的速度曲線，默認ease
animation-delay	規定動畫什麼時候開始，默認0
animation-iteration-count	規定動畫被播放的次數默認爲1，還有infinite
animation-direction	規定動畫是否在下一週期逆向播放，默認是「normal」，alternate逆向播放
animation-play-state	規定動畫是否正在運行或者暫停，默認是「running」，還有「paused」
animation-fill-mode	規定動畫結束後狀態，保持forwards回到起始backwards

3.動畫簡寫

animation：動畫名稱 持續時間 運動曲線 什麼時候開始 播放次數 是否反方向 動畫起始或者結束的狀態；
animation：myfirst 5s linear 2s infinite alternate；

瀏覽器私有前綴

-moz-	表明firefox瀏覽器
-ms-	表明ie瀏覽器
-webkit-	表明Safari，chrome
-o-	表明opera

meta視口標籤

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 ">

width	寬度設置的是viewport寬度，能夠設置device-width特殊值
initial-scale	初始縮放比，大於0的數字
maximum-scale	最大縮放比，大於0的數字
minimun-scale	最小縮放比，大於 0的數字
user-scalable	用戶是否能夠縮放，yes或no（1或0）

背景縮放

background-size：數值;

長度	只寫一個的話會等比例縮放
百分比	相對父盒子來講比例
cover	把背景圖片擴展至足夠大，使其背景圖像徹底覆蓋背景區域
contain	把背景圖像擴展至最大尺寸，使其寬度和高度徹底適應內容區域