一.css3變形
css3變形是一些效果的集合
如平移、旋轉、縮放、傾斜效果
每個效果都可以稱為變形(transform),它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化
二.css3位移:translate
<style
type
="text/css"
>
li a:hover
style
>
三.css3的縮放scale
transform: scale(縮放倍數);
<style
type
="text/css"
>
li a:hover
style
>
四.css3的傾斜skew
transform: skew(-10deg,-30deg);
<style
type
="text/css"
>
li a:hover
style
>
五.css3的旋轉rotate
transform: rotate(361deg);
<style
type
="text/css"
>
img:hover
style
>
※當想使用多個函式的話那麼每個函式中間用空格分割
六.css的過度
transition: 過度屬性 過度完成時間 過渡動畫函式 過度延遲時間;
1.過渡屬性( transition-property )
定義轉換動畫的css屬性名稱
ident:指定的css屬性(width、height、background-color屬性等)
all:指定所有元素支援transition-property屬性的樣式,一般為了方便都會使用all
2.過渡所需的時間( transition-duration )
定義轉換動畫的時間長度,即從設定舊屬性到換新屬性所花費的時間,單位為秒(s)
3.過渡動畫函式( transition-timing-function )
指定瀏覽器的過渡速度,以及過渡期間的操作進展情況,通過給過渡新增乙個函式來指定動畫的快慢方式
ease:速度由快到慢(預設值)
linear:速度恆速(勻速運動)
ease-in:速度越來越快(漸顯效果)
ease-out:速度越來越慢(漸隱效果)
ease-in-out:速度先加速再減速(漸顯漸隱效果)
4.過渡延遲時間( transition-delay )
指定乙個動畫開始執行的時間,當改變元素屬性值後多長時間去執行過渡效果
正值:元素過渡效果不會立即觸發,當過了設定的時間值後才會被觸發
負值:元素過渡效果會從該時間點開始顯示,之前的動作被截斷
0:預設值,元素過渡效果立即執行
<style
type
="text/css"
>
li img
li img:hover
style
>
七.css的動畫
1./*宣告關鍵幀*/
@keyframes s130320%40%
60%80%
100%
}
animation: s1303 2s linear infinite;
CSS3中的動畫
animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...
CSS3中的動畫
動畫 animation 是css中具有顛覆性的特徵之一,可以通過設定多個節點來精確控制乙個,或一組動畫 常用來實現複雜的動畫效果。1.動畫的基本使用 製作動畫分為兩步 先定義動畫 再使用 呼叫 動畫 用keyfames定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫基本使用命...
CSS3中的animation動畫
animation實現乙個屬性值得動畫 背景變換 滑鼠經過 總結 而他的幀集合也需要寫核心字首,就會有四個不同的 webkit keyfranmes moz keyfranmes ms keyfranmes o keyfranmes.然後,hover模式中每乙個帶著animation的屬性前也要加核...