CSS3 transition動畫 圓角 rgba

2021-09-27 04:45:15 字數 1321 閱讀 2904

1、transition-property 設定過渡的屬性,比如:width height background-color

2、transition-duration 設定過渡的時間,比如:1s 500ms

3、transition-timing-function 設定過渡的運動方式,常用有 linear(勻速)|ease(緩衝運動)

4、transition-delay 設定動畫的延遲

5、transition: property duration timing-function delay 同時設定四個屬性

製作滑鼠移入時,說明滑入的效果

1、translate(x,y) 設定盒子位移

2、scale(x,y) 設定盒子縮放

3、rotate(deg) 設定盒子旋轉

4、skew(x-angle,y-angle) 設定盒子斜切

5、perspective 設定透視距離

6、transform-style flat | preserve-3d 設定盒子是否按3d空間顯示

7、translatex、translatey、translatez 設定三維移動

8、rotatex、rotatey、rotatez 設定三維旋轉

9、scalex、scaley、scalez 設定三維縮放

10、tranform-origin 設定變形的中心點

11、backface-visibility 設定盒子背面是否可見

背面文字說明

理解練習:

1、風車動畫

2、loading動畫

3、人物走路動畫

css3圓角

設定某乙個角的圓角,比如設定左上角的圓角:

border-top-left-radius:30px 60px;

同時分別設定四個角: border-radius:30px 60px 120px 150px;

設定四個圓角相同:

border-radius:50%;

rgba(新的顏色值表示法)

1、盒子透明度表示法:

.box

2、rgba(0,0,0,0.1) 前三個數值表示顏色,第四個數值表示顏色的透明度

css3 transition過渡屬性

今天學習了css3的過渡屬性,總結一下 transition有4個屬性 第乙個是要過渡的樣式 all 所有 attr none 不寫 一般情況下都是設定某個屬性來設定過渡,例如 transition width 0.3s.第二個是運動的時間,單位是s 秒 ms 毫秒 可以為不同的屬性設定不同的運動時...

css3 transition簡單使用

selector四個引數說明如下 transition property 指 將要對selector 的哪些屬性值 多個用逗號隔開 的改變進行過渡處理,預設為all,即只要selector 的 任何乙個 css屬性發生變化 比如hover或click導致的background color變化 則對此...

認識CSS3 transition屬性

transition property duration timing function delay 1.transition property 定義過渡的屬性,預設是all,都過渡 2.transition duration過度需要的時間,以秒計時 3.transition timing func...