濾鏡動畫
通過@keyframs定義動畫。
在指定元素中,通過animation屬性來呼叫動畫。
定義動畫
animation-name:動畫名稱
animation-duration 執行一次動畫的完成時間。
animation-iteration-count: 動畫的執行次數
infinite 表示無數次。
animation-delay: 動畫延遲執行的時間。
animation-fill-mode:
forwards:在動畫結束後,盒子保持結束幀狀態。
backwards 在動畫開始時,包含延遲時間,讓盒子保持初始幀狀態
both 是 backwards forwards都生效
none(預設值)
animation-direction: 動畫的執行方式
alternate:交替執行。
normal 正常(預設)
reverse 反向 從結束幀開始到初始幀結束。
【注】alternate 反向也會算一次執行時間。
animation-timing-function:linear;
linear 勻速
ease-in 加速
ease-out 減速
ease-in-out 先加速後減速
animation-play-state 動畫執行狀態
paused:暫停
running 執行
animation: move 1s
動畫名稱 執行時間這兩個必須要寫在最前面,後面的屬性沒有順序 ,每個屬性要用空格隔開。
這裡上面用的復合屬性下面用的分解屬性,運用效果是一樣的。
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
遇見CSS3濾鏡
譯自 jeffrey way於2011年12月22日 教程詳細內容 主題 css濾鏡 可用性 webkit每晚構建的版本 酷炫程度 100 演示 本月初公布了乙個新的規範 濾鏡效果1.0。它提出了一些令人興奮的新特性,我們可以使用它在瀏覽器中來建立photoshop般的效果。更妙的是,webkit已...
css3 濾鏡效果
色相旋轉 曾經和photoshop色相 飽和度面板打過交道嗎?現在好了,你可以在瀏覽器中應用它。img 如果對這個度數值如何設定感到困惑,可以試想一下乙個色輪。您指定的度數值決定了該輪停止之處。這意味著 0deg將不會有任何效果,而50deg會相應的轉動撥盤。在這種情況下,nettuts 的標誌將採...
遇見CSS3濾鏡
譯自 jeffrey way於2011年12月22日 教程詳細內容 主題 css濾鏡 可用性 webkit每晚構建的版本 酷炫程度 100 演示 本月初公布了乙個新的規範 濾鏡效果1.0。它提出了一些令人興奮的新特性,我們可以使用它在瀏覽器中來建立photoshop般的效果。更妙的是,webkit已...