下面的是我的筆記
1、transition: 平衡過渡
transition :過渡效果的 CSS 屬性的名稱 完成過渡效果需要多少秒或毫秒 速度效果的速度曲線 過渡效果何時開始
1)過渡效果的 CSS 屬性的名稱(一般有):all、no、 width、height
2)速度效果的速度曲線(動畫的速度曲線):
linear | 規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。 |
ease | 規定慢速開始,然後變快,然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。 |
ease-out | 規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。 |
2、animation: 動畫
一般通過@keyframes 規則,創建動畫。 在動畫過程中,您能夠多次改變這套 CSS 樣式。以百分比來規定改變發生的時間,或者通過關鍵詞 "from" 和 "to",等價於 0% 和 100%。0% 是動畫的開始時間,100% 動畫的結束時間。
例子:
animation: mymove 開始時間 動畫的速度曲線 延遲 重複次數 是否應該輪流反向播放動畫
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
3、transform: 改變元素的大小、位置
注意:粉紅色爲圖形原來的樣子,大紅色爲變化後的樣子
1) translate:移動
translate(x,y) | 定義 2D 轉換。 |
translate3d(x,y,z) | 定義 3D 轉換。 |
translateX(x) | 定義轉換,只是用 X 軸的值。 |
translateY(y) | 定義轉換,只是用 Y 軸的值。 |
translateZ(z) | 定義 3D 轉換,只是用 Z 軸的值。 |
2) rotate:旋轉
旋轉的時候,可以給旋轉的模塊設置一個原點 (下圖的圓心爲設置的原點,模塊內的點爲原始的原點)
transform-origin: x , y;
3) scale:放縮
4) skew:扭曲(傾斜)
5) matrix:矩陣,一般用來變換前面四種沒有的效果,也可以實現前面四種效果
請看:Matrix詳解
4、動畫技巧:
1、animation-delay:設置爲負值
animation-delay:定義動畫何時開始
默認爲0 | 立即執行動畫 |
正值 | 延遲指定時間後執行動畫 |
負值 | 立即執行,但跳過指定時間後進入動畫(比如取值 -1,即是跳過動畫執行的一秒,從 00:01 開始執行動畫) |
例子:
1)效果圖 :動畫延遲
2)代碼:animation-delay
2、設置border的顏色
邊框分爲4部分
border-left-color、border-top-color、border-right-color、border-bottom-color
例子:
1)效果圖:邊框顏色
2)代碼:border-left+animation+transform
3、設置border的寬度
border-left-width、border-top-width、border-right-width、border-bottom-width
例子:
1)效果圖:折角效果圖
2)代碼:折角效果