關於一些CSS動態效果的整理

僅列出一些常用命令，和常用簡寫：

過渡半秒：transition:.5s

放大縮小：transform:scale(1)

移動效果：translatex(100%)、translatey(100%)、translate(x,y)

旋轉效果：rotate(45deg)

關聯到動畫：

test
@keyframes donghua100%}

套用多個動畫

test
@keyframes donghua1100%}
@keyframes donghua2100%}

動畫簡寫

animation: name duration timing-function delay iteration-count direction;

每個屬性的作用：

乙個滾動軸效果：

.test
@keyframes gundong100%}

這裡的background-image只起到顏色疊加的作用，並非是背景色。需要注意的是background-image中的四個百分比控制背景從上到下四個部分區域，每個區域需要兩個端點去控制，如果每個端點只設定一次顏色，顯示的效果就會是漸變色，如果你不需要漸變色，則必須在每個端點處設定兩次顏色才能達到效果（這個和ps中的漸變色設定方法很像），而且要注意設定顏色的順序，可以這麼去理解：025%、25%50%、50%75%…這裡的75100%的部分因為和背景色同色，所以被省略掉了。45deg表示旋轉45度角。background-color設定背景顏色，transparent表示不設定此處的顏色，也就是透明。background-size控制背景大小。animation用來關聯後邊的動畫效果。

關於一些CSS動態效果的整理

整理中藥的一些效果

css一些基礎效果

css一些實用的整理

關於一些CSS動態效果的整理

整理中藥的一些效果

css一些基礎效果

css一些實用的整理

相關推薦