web前端學習(三)css學習筆記部分(5)-- CSS動畫--頁面特效、HTML與CSS3簡單頁面效果實例
阿新 • • 發佈:2018-11-30
key cti 樣式 描述 ans 轉換方法 動畫效果 ansi order
CSS動畫--頁面特效部分內容目前僅僅觀看了解內容,記錄簡單筆記,之後工作了進行內容的補充
7. CSS動畫--頁面特效
7.1 2D、3D轉換
7.1.1 通過CSS3轉換,我們能夠對元素進行移動、縮放、轉動、拉長或拉伸
轉換是使元素改變形狀、尺寸和位置的一種效果
可以使用2D、3D來轉換元素
7.1.2 2D轉換方法
translate()
rotate()
scale()
skew()
matrix()
7.1.3 3D轉換方法:
rotateX()
rotateY()
7.2 過渡
1、通過使用CSS3,可以給元素添加一些效果
2、CSS3過渡是元素從一種樣式轉換成另一種樣式
動畫效果的CSS
動畫執行的時間
3、屬性
屬性 | 描述 |
transition | 設置四個過渡屬性 |
transition-property | 過渡的名稱 |
transition-duration | 過渡效果花費的時間 |
transition-timing-function | 過渡效果的時間曲線 |
transition-delay | 過渡效果開始時間 |
7.3 動畫
1、通過CSS額,也可以進行創建動畫了
2、CSS3的動畫需要遵循@keyframes規則
規定動畫的時長
規定動畫的名稱
7.4 多列
1、在CSS3中,可以創建多列來對文本或者區域進行布局
2、屬性:
column-count
column-gap
column-rule
7.5 瀑布流效果
web前端學習(三)css學習筆記部分(5)-- CSS動畫--頁面特效、HTML與CSS3簡單頁面效果實例