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...