動畫效果
彈性盒模型
使用過渡可以動態地改變乙個顏色的值，以動畫的形式過渡到另乙個顏色
簡寫格式：
transition:transition: 過渡屬性 過渡時間(不能省略) 過渡效果 延遲時間;
可以使用transition-property屬性來指定要參與過渡的css屬性名
格式：
transition-property: none | all | property;
引數： none表示沒有要過渡的屬性
all 表示對所有屬性應用過渡
property 表示css屬性名稱，多個名稱之間用逗號分隔。
格式：
transition-duration: time;
引數： time 表示完成動畫所需的秒數，預設為0，即沒有過渡效果。
注意： 這個在簡寫時不能省略
格式：
transition-timing-function: effectname;
引數： effectname 表示過渡效果的名稱，預設值是ease，即以溶解方式進行過渡
ease
剛開始慢然後變快最後在慢的效果，預設值
linear
勻速開始至勻速結束的過渡效果
ease-out
以慢速結束的過渡效果
ease-in
以慢速開始的過渡效果
cubic-bezier
自定義特殊的貝塞爾曲線效果
transition-delay屬性用於定義動畫開始之前的延遲時間。
格式：
transition-delay: time;
引數： time 表示時間，可以設定為s（秒）或者ms（毫秒），預設值為0，即表示沒有延遲
在使用動畫效果之前必須先定義關鍵幀，乙個關鍵幀表示動畫過程的乙個狀態，在css3中提供@keyframes屬性用來定義關鍵幀
格式：
@keyframes animationname
}引數：
animationname
表示當前動畫的名稱，它將作為引用時的唯一標識，因此不能為空。
keyframes-selector
關鍵幀選擇器，即指定當前關鍵幀要應用到整個動畫過程中的位置，值可以是乙個百分比、from或者to。
其中from和0%效果相同表示動畫的開始，to和100%效果相同表示動畫的結束。
css-styles
定義執行到當前關鍵幀時對應的動畫狀態，由css樣式屬性進行定義，多個屬性之間用分號分隔，不能為空。
animation-name 屬性
該屬性用於定義要應用的動畫名稱
格式：
animation-name: animationname;
引數： animationname指的是使用@keyframes屬性定義的動畫名稱。
如果值為none則表示不應用任何動畫效果，通常用於覆蓋或取消動畫。
該屬性用於定義整個動畫效果完成所需要的時間
格式：
animation-duration: time;
引數： time 引數是以秒（s）或則毫秒（ms）為單位的時間，預設是0表示沒有動畫。
該屬性用於定義使用哪種方式執行動畫效果，跟過渡的transition-timing-function屬性幾乎是一樣的
格式：
animation-timing-function: effectname;
引數： effectname表示過渡效果的名稱
linear
以勻速的方式開始的動畫效果
ease
剛開始慢然後變快最後在慢的動畫效果，預設值
ease-out
以慢速結束的動畫效果
ease-in
以慢速開始的動畫效果
ease-in-out
以慢速開始和結束
cubic-bezier
自定義特殊的貝塞爾曲線效果
animation-delay 屬性
該屬性用於定義執行動畫效果之前的延遲時間
格式：
animation-delay: times;
引數： times 引數是以秒（s）或則毫秒（ms）為單位的時間，預設是0表示沒有延遲。
該屬性用於定義當前動畫效果重複執行的次數
格式：
animation-iteration-count: n|infinite;
引數： n 表示動畫執行幾次，是乙個整數，預設為1
infinite 表示該動畫無限次重複執行
格式：
animation-direction: direction;
引數： direction引數有兩個值：
normal 預設值，表示每次動畫都從頭開始執行到最後
建議： 當animation-iteration-count（動畫執行次數）為infinite（無限次執行時） 使用alternate 引數效果會更好
animation-fill-mode:forwards | backwards | both;forwards
表示在動畫完成後繼續使用最後乙個關鍵幀裡面的樣式 （保留完成時的動作）
backwards
表示在動畫開始之前使用初始關鍵幀裡面定義的樣式
both
同時應用forwards和backwards的效果
animation-play-state屬性
格式：
animation-play-state:running|paused;
引數： running 動畫開始
paused 動畫結束
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性
格式：
animation: animation-name 引用@keyframes定義的動畫名稱
animation-duration 動畫執行的時間
animation-timing-function 動畫執行效果
animation-delay 動畫執行效果之前的延遲時間
animation-iteration-count 動畫的執行次數
animation-direction 動畫的執行方向
如有錯誤還請指出，希望這篇文章能給予你們幫助！
HTML5 CSS3實現新增鎖屏效果
鎖屏效果，也就是將螢幕置於模態，不允許使用者觸發任何動作，只能解除鎖定後才能繼續使用，jqueryui的dialog有模態對話方塊，這一點不難做到。那麼，首先需要在頁面中新增乙個div層，用於做模態的層 其對應的css比較簡單，主要設定一下z index屬性，值設定的很大即可，就能達到覆蓋其餘元素的...
HTML5 CSS3實現新增鎖屏效果
鎖屏效果，也就是將螢幕置於模態，不允許使用者觸發任何動作，只能解除鎖定後才能繼續使用，jqueryui的dialog有模態對話方塊，這一點不難做到。那麼，首先需要在頁面中新增乙個div層，用於做模態的層 html 其對應的css比較簡單，主要設定一下z index屬性，值設定的很大即可，就能達到覆蓋...
重頭學習html5 css3系列筆記（3）
復合選擇器 字型屬性 文字屬性 css 設定文字內容 字型，大小，對齊方式 的外形 寬度，邊框樣式，邊距 版面的布局和外觀顯示樣式 css美化html 讓html專注於結構 css由兩部分構成 選擇器 一條或多條宣告 css選擇器 又分基礎選擇器和復合選擇器兩大類 基礎選擇器 由單個選擇器構成，又包...