css3 常用整理 （3）

先寫乙個關鍵幀，動畫按這個關鍵幀運動

@keyframes move            

100%         
}複製**

div複製**

然後在div上繫結這個關鍵幀，animation和transition很像，有那麼幾個引數值

animation-name:

animation-duration:

animation-timing-funciton:

animation-delay:

animation-direction: normal/reverse/alternate/alternate-reverse

alernate奇數次正向，偶數次反向；alternate-reverse相反

動畫執行次數

forwards元素停留在動畫的最終幀；backwards忽略原位置，直接定位到動畫的初始幀；both即二者結合

odiv.onclick = function

()

當動畫進行完畢後，div會回到最初的位置（left: 20px）

當keyfreams是從0%到100%時，可以直接寫from - to，即

@keyframes move            

to         
}複製**

css3屬性整理

1.div裡面文字自動轉行 word wrap break word 2.溢位隱藏 text overflow clip 溢位隱藏顯示省略號 text overflow ellipsis 3.text fill color 文字內部填充顏色 text stroke color 文字邊界填充顏色 te...

css3動畫整理

css3動畫主要常用的屬性有 變形 transform 轉換 transition 動畫 animation 三種。變形 transform 主要有以下幾種方式 旋轉rotate rotate transform rotate 20deg 扭曲skew skew x,y transform skew...

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...