CSS3全覽_動畫+濾鏡

隨遇丿而安發表於2020-12-18
CSSS3動畫

CSS3全覽_動畫+濾鏡

目錄

作者: https://www.cnblogs.com/xiaxiangx/

1. 列表和生成的內容

  1. 列表

    • 列表的列線, list-style-type, 如果不想顯示記號, 使用 none, none的作用是禁止在本該顯示記號的位置上出現任何內容, 不過卻不阻斷有序列表的計數. list-style-type 的值是繼承的, 如果希望巢狀的列表使用不同的記號, 要分別定義.
      • 字串記號, list-style-type: "%"; 目前, 只有 Firefox 族瀏覽器支援字串記號
    • 專案列表影像, list-style-image, 取值, url, iamge, none, inherit, 預設是繼承的, 最好提供一個預設 list-style-type, 後備記號型別, list-style-image 的值可以是任何影像值, 包括漸變影像, 漸變記號的一個缺點是尺寸特別小, 這個尺寸不受CSS 的控制, 並且支援的瀏覽器也少
    • 列表記號的位置, list-style-position, 取值, inside, outside( 初始值 ), inherit,
    • 列表樣式的簡寫屬性, list-style, 例如: li{list-style: url(ohio.gif) square inside;}
    • 列表的佈局
      • 記號與列表專案內容之間的距離不是 CSS 定義的, 列表專案本質上是類似塊級的元素. list-item 值生成的就是塊級框. 列表專案和列表元素都是塊級框

  2. 生成的內容

    • 插入生成的內容, ::before 和 ::after 偽元素插入文件

      • 如果 ::before 或 ::after 選擇符的目標是塊級元素, 那麼 display 屬性的值只能為 none, inline, block 或 marker. 其他值都當做 block
      • 如果 ::before 或 ::after 選擇符的目標是行內元素, 那麼 display 屬性的值只能為 none 或 inline, 其他值都當做 inline
      • 生成的內容會從依附的元素上繼承屬性值

    • 指定內容, content, 取值, normal(初始值), <string>, <uri>, <counter>, attr(<identifier>), open-quote, close-quote, no-open-quote, no-close-quote, inherit,

      • 字串值顯示為字面量, uri, 指向的外部資源將插入文件的適當位置
      • 插入屬性值, 把元素的屬性值顯示在文件中, content: attr(href); 如果引用的屬性不存在, 所在的位置將顯示空字串
      • 生成引號, quotes, 取值, 一對或多對字串, 比如設定了 quotes: ' "" ' ' "" ';設定兩個雙引號, 使用時, content: open-quote, 或 content: close-quote, 插入的值來自 quotes, 如果引號巢狀的層級比定義的引號對多, 後續的層級都使用最後一對引號.
      • 如果引用的文字分成多段, 每一段結尾處的引號通常不顯示, 使用 no-close-quote 實現, 對應的還有 no-open-quote 關鍵字

    • 計數器

      • 重置和增量, counter-reset, 設定起點, h1{counter-reset: CHapter 4 section -1 subsec fugure 1;}

      • 為了計數, 需要通過一個屬性指明通過哪個元素遞增計數器. counter-increment, 預設為1, 為負數, 遞減, 為正數, 遞增

        ol{ counter-reset: ordered;} /*預設為0*/
ol li {counter-increment: ordered;} /*預設為1*/
ol li{counter-increment: -1} /*每次減1*/

      • 使用計數器, 需要使用 content 屬性及與計數器有關的值, content: counter(ordered);

        h1 {counter-reset: section subsec;
	counter-increment: chapter;}
h1::before{countent: counter(chpter) "." ;}
h2 {counter-reset: subsec;
	counter-increment: section;}
h2::before{content: counter(chapter)"." counter(section)". ";}
h3 {counter-increment: subsec;}
h3::before{content: counter(chapter)"." counter(section)"."counter(subsec)".";}

      • display 屬性的值為 none 的元素不遞增計數器, 即便樣式規則看似不是這樣. visibility 屬性的值為 hidden 的元素依然遞增計數器

      • 計數器的作用域, counter-reset: ordered 每層巢狀都會新建一個 ordered 計數器. 如果希望巢狀的新計數器追加到現有的計數器上, 實現 1, 1.1, 1.2, 可以使用counters()

        ol{counter-reset: ordered; list-style: none;}
ol li:before {content: counters(ordered,".")"."; counter-increment: ordered;}

  3. 定義計數模式

    • @counter-style <name> { ... declarations... } , 目前只有火狐支援

      • 若想交替顯示三角形記號

        @counter-style triangles{
    system: cyclic;
    symbols: → △
}

      • 可用的描述符, system, symbols, additive-symbols, prefix, suffix, negative, range, fallback, pad, speak-as

    • 固定計數模式, system: fixed;, 定義的計數器記號數量有限, 用完不重複. 把所有的symbols中的符號都用引號引起來, 可以在 system 描述符中定義起始值.

      @counter-style emoji{
    system: fixed 5; /*計數從5開始*/
    symbols: "#" "$" "%";
}

    • 迴圈計數模式, system: cyclic; 定義的符號按順序使用, 一次又一次, 直到計數序列中沒有記號為止. 迴圈模式可以只用一個記號, 這與為 list-style-type 提供一個字串的效果差不多.

      • 所有的計數器後面都有個句點. 這是因為 suffix 描述符的預設值就是句點. suffix 描述符有個同類, prefix. 使用這兩個描述符可以定義在每個記號前面和後面的符號, 使用方法如下
      @counter-style wingthinker{
    system: cyclic;
    symbols: "$";
    prefix: "~";
    suffix: "~";
}
ul.hmmm {list-style: winghker;}

    • 符號計數式, system: symbolic; 與迴圈系統類似, 不過在符號系統中國, 每迴圈一次符號重複多一次.

      • @counter-style footnotes{
    system: symbolic;
    symbols: "*" "丿";
    suffix: " ";
}

      • range 描述符, 它的值為一對或多對以空格分開的值, 每一對之間以逗號分隔, 多出的以原始形式展示

      • 不在 range 定義的範圍內的計數器, 可以使用 fallback 描述符自定義, 如果主計數系統無法表示計數器中的某個值, 也將使用後備計數格式

      • @counter-style letters{
    system: symbolic;
    symbols: A B C D E;
    range: 1 14, 100, 105;
    fallback: hebrew
}

    • 字母計數模式, system: alphabetic 計數系統與 symbolic 系統十分相似, 重複的方式不同, symbols 描述符的值至少有兩個符號.

    • 數字計數模式, system: numeric; 可以定義16進位制計數系統

      • 負值使用 negative 描述符處理, negative 只能在支援負值的技術系統中使用, 包括 alphabetic, numeric, symbolic 和 additive

      • negative 有點像 prefix 和 suffix 的綜合體, 只不過僅在計數器為負值的時候起作用

      • @counter-style accounting{
    system: numeric;
    symbols: '0' '1' '2';
    negative: "(" ")";
    prefix: "$";
    suffix: "-";
}
ol.kaching{ list-style: accounting;}

      • 數字計數系統的另一個特性是為位數較少的值補全, 讓長度儲存與位數較多的值相同, 這需要使用 pad 描述符

      • pad 描述符, 第一部分是一個真實, 定義每個計數器有幾位數, 第二部分是一個字串, 用於填充位數不足的值. 負號算在記號的長度內

      • @counter-syle accounting{
	system: numeric;
    symbols: '0' '1' '2';
    pad: 4 "0";
    suffix: ".";
}

    • 累加計數模式, system: additive-symbol

      • @counter-style roman{
    system: additive;
    additive-symbols:
        100 M, 900 CM, 500 D, 400 CD,
        100 C, 90 XC, 50 L, 40 XL,
        10 X, 9 IX, 5 V, 4 IV, 1 I;
}

      • 典型的羅馬計數風格

    • 擴充套件計數模式, extends , 算是一種計數系統

      • @counter-style mydecimals{
    system: extends decimal;
    suffix: ")";
    pad: 2 "0";
}

    • 發音計數模式, speak-as 描述符, 取值, auto, bullets, numbers, words, spell-out, <counter-style-name>


2. 變形

利用 CSS 提供的變形功能, 不僅能平移元素, 還能做很多其他的事

  1. 座標系
    • 2d 變形只需關注 x 軸和 y 軸. translateX(-5em) translateY(33px)
    • 2d 旋轉,
  2. 變形
    • transform, 取值, <transform-list> 受 CSS 控制的元素, 其範圍框是邊框框, 計算範圍框時, 輪廓的外邊距不算在內
      • 如果使用 CSS 改變可縮放向量圖形 ( scalable vector graphic, svg) 的形態, 其範圍框是 SVG 圖形定義的物件範圍框.
      • 變形的元素有自己的堆疊上下文, 經過縮放的元素可能比變形前大或小, 不過元素在頁面上所佔的空間與變形前儲存不變, 這一點對所有變形函式都成立.
      • 變形函式 從頭到尾的處理順序是很重要的, 順序變了, 得到的結果可能就大有不同, 所有變形都是相對元素自己的參照系實施的
      • 變形函式, translate(), translate3d(), translateX(), translateY(), translateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), skew(), skewX(), skewY(), matrix(), matrix3d(), persperctive()
      • transform 屬性的值通常由空格分隔的一個或多個函式, 各函式從頭 (左) 至尾 (右)一次處理, 而且每個函式的值都必須是有效的, 倘若有一個函式的值是無效的, 那麼 transform 屬性的整個值都將失效, 因而也就不做任何變形
      • 平移函式, translateX, translateY, translateZ, 可以是數字, 可以是百分數, 百分數相對於自己的長度而言, translate() 能同時改變x,y, 只有一個引數的情況下, y值改變預設0. translate3d() 的引數必須有三個, 否則無效
      • 縮放函式, scaleX(), scaleY(), scaleZ(), 在各軸上縮放, scale(), 在兩個軸上同時縮放, 只提供一個值的話, x, y 同時適用這個值. scale3d() 能同時在三個軸上縮放. 引數必須有三個, 否則無效
      • 旋轉函式, rotate(), rotateX(), rotateY(), rotateZ(), 四個簡單的旋轉函式都只接受一個值, 即角度. 角度值以一個數字( 可正可負 ) 和一個有效的角度單位( deg, grad, rad 和 turn) 表示. 如果數字超出了相應單位的常規範圍, 將化為範圍內的值. 僅僅當沒有使用任何形式的動畫, 這樣的換算才是完全等效的. 如果以動畫的形式選擇 1100deg, 元素將炫動幾周. rotate() 函式實施的是 2D 選擇, 相當於 rotateZ(). rotate3d() 前三個值指定 3D 空間中向量的 x, y 和 z分量, 第四個值是角度值, 指定繞向量旋轉的量
      • 傾斜函式, skewX(), skewY(), 沿 x 軸和 (或) y軸傾斜元素. 元素不能沿 z 軸或3D空間中的向量傾斜, 繞中心點向 x 軸或 y 軸傾斜成平行四邊形. skew(), skew(a,b) 的效果與 skewX(a) skewY(b) 不同, 前者通過矩陣運算 [ax, ay] 實施2D 傾斜, 提供兩個值就是 x,y, 提供一個值, y為0
      • 視域函式, perspective(), 在 3D 空間中改變元素的形態時, 基本上都要賦予元素一定的視域, 視域為元素賦予前後深度, 而這深度 可以根據需要設定. 如果想在變形函式列表中設定視域值, 一定要把 perspective() 函式放在首位, 至少也要放在依賴視域的變形之前.
      • 矩陣函式, matrix() , matrix() 函式的有效值是六個以逗號分隔的數字, 不能多也不能少. matrix3d(), 以主序列排列一個4*4的齊次矩陣, 用16個值指定 3D 變形. 如果用matrix() 函式實現相同的最終狀態, 也不會有滾動效果, 而是以最簡短的路徑到達最終狀態
  3. 其他變形屬性
    • 移動原點, 目前所在的變形都有個共同點, 都以元素的絕對中心為變形的原點. 旋轉元素時, 是繞著中心旋轉的, 不過可以使用 transform-origin 屬性修改. transform-origin, left, center, right, top, bottom, <percentage>, <length>.
      • transform-origin 屬性的值為兩個或三個關鍵字, 用於定義相對哪個點變形: 第一個值針對橫向, 第二個值針對縱向, 可選的第三個值是 z 軸上的長度. z軸不能使用英語關鍵字或百分數. 百分數相對對應的軸和元素的尺寸計算, 設定是距元素左上角的偏移量.
    • 選擇 3D 變形方式, 預設情況下, 不管怎樣變形, 得到的結果都是扁平的. 幸好, 這個行為可以使用 transform-style 屬性修改
      • transform-style, 取值 flat(預設值), preserve-3d. transform-style 設定的變形方式可能會被其他屬性覆蓋. 這是因為那些屬性的某些值要求元素及其子元素必須以扁平的方式呈現才能起作用. 影響被覆蓋的屬性有, overflow: visible, filter: none, clip: auto, clip-path: none, mask-image: none, mask-border-souce: none, mix-blend-mode: normal, isolation 屬性的值必須是或者計算為 isolate
    • 修改視域, 相當於前面討論過的 perspective() 函式;
      • 定義視域, perspective, 這個屬性的值是一個長度, 定義視域椎體的深度, 與 perspective() 函式功能類似, perspective 屬性定義的視域深度應用到目標元素的所有子元素上, 而perspective() 函式只為目標元素定義視域. 為了讓 3D 空間中的變形有視覺效果, 要把 perspective() 函式放在變形函式列表的開頭或前部. 多數時候, 應該使用 perspective 屬性.
      • 移動視域的原點, 視野有原點, 也稱消隱點, 這個點的位置可以使用 perspective-origin 屬性修改, 初始值, 50% 50%, perspective-origin 的取值句法與 transform-origin 一樣, perspective-origin 定義的是視線匯聚於哪一點.
    • 處理背面
      • backface-visibility 背面處理屬性, 取值, visible, hidden

3. 過渡

在一段時間內把 CSS 屬性的初始化變為另一個值

  1. CSS 過渡

    • CSS 過渡能控制一段時間內屬性的值如何變成另一個值. transition: color 200ms ease-out 50ms;

  2. 定義過渡的屬性

    • 過渡使用四個屬性定義: transition-property, transition-duration, transition-timing-function 和 transition-delay. 此外, 還有個簡寫屬性 transition, 可一次宣告全部四個屬性.

    • 始態和終態可以應用不同的過渡至, 但是進入某一狀態時一定會使用氮氣狀態定義的值

    • 限制受過渡影響的屬性, transition-property 屬性指定想應用過渡效果的 CSS 屬性名稱, 這樣便可以限定只在特定的屬性上應用過渡效果, 而其他屬性則瞬間完成, transition-property 屬性的值是以逗號分隔的屬性列表; 或者是none, 表示不過渡任何屬性; 還可以是預設值 all, 如果只有

      • 禁用過渡效果, 使用 transition-property: none 覆蓋整個過渡宣告, 禁用所有屬性的過渡效果, 另一種方法是把屬性的延遲和持續時間都設為 0s.
      • 過渡事件, 過渡結束後會觸發 transitionend 事件. 每個支援動畫的屬性有各自的 transitionend 事件. transitionend 事件有三個與該事件有關的屬性, 1. propertyName: 結束過渡的 CSS 屬性的名稱. pseudoElement: 應用過渡效果的偽元素, 前面有兩個冒號, elapsedTime: 過渡持續的時間, 單位為秒; 返回的值通常是 transition-duration 屬性宣告的時間, 過渡中斷不會觸發, 返回初始值會觸發.

    • 設定過渡持續時間, transition-duration, 單位為 s 或 ms, 設定了多個持續時間, 在誰的狀態就用誰的. 值不能為負. 可以設定各個不同屬性持續的時間, 如果恰好宣告兩個持續時間, 奇數位上的屬性使用第一個持續時間, 偶數位上的屬性使用第二個持續時間, 持續時間一般在 100 到 200ms 直接效果最好

    • 調整過渡的內部時序, transition-timing-function, 可取值, ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(n, start), http://easings.net 網站額外提供了很多三次方貝賽爾函式值.

      時序函式 說明 三次方貝賽爾值
      cubic-bezier() 指定一個三次方貝賽爾曲線 cubic-bezier(x1, y1, x2, y2)
      ease 慢速開始, 加速, 慢, 結束特別慢 cubic-bezier(0.25, 0.1, 0.25, 1)
      linear 整個過渡過程保持相同的速度 cubic-bezier(0, 0, 1, 1)
      ease-in 慢速開始, 然後加速 cubic-bezier(0.42, 0, 1, 1)
      ease-out 快速開始, 然後減速 cubic-bezier(0, 0, 0.58, 1)
      ease-in-out 與ease類似, 中間快,兩邊慢 cubic-bezier(0.42, 0, 0.58, 1)
      • 步進時序,
      時序函式 定義
      step-start 整個過渡都處在最終關鍵幀上. 等同於 steps(1, start)
      step-end 整個過渡都處在初始關鍵幀上, 等同於steps(1, end)
      steps(n, start) 顯示 n 個固定鏡頭, 其中第一個固定鏡頭佔整個過渡的百分之 n
      steps(n, end) 顯示 n 個固定鏡頭, 前百分之 n 的時間出於初始值狀態

    • 延遲過渡, transition-delay 屬性, 可以為負, 只設定兩個值, 和持續時間一樣. 我們可以做些數學運算, 為每個過渡的屬性設定不同的持續時間和延遲, 但是確保所有過渡在同一時間結束. 在某種程度上, 50ms 的延遲能防止導航選單意外展開,

      • 負的延遲值, 如果 transition-delay 的值為負數, 而且絕對值比 transition-duration的值小, 從中間某個位置立即開始過渡, 絕對值大的話, 將瞬間變化. 不觸發 transitionend 事件

    • transition 簡寫屬性, 一個時間表示持續時間, 兩個表示持續時間和延遲時間.

      div{
    transition-property: color, border-width, border-color, border-radius, transform, opacity, box-shadow, width, padding;
    transition-duration: 200ms,180ms, 160ms, 140ms, 120ms, 100ms 1s, 2s, 3;
    transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear, step-end, step-start, steps(5, start), steps(3, end);
    transition-delay: 0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s, 1.2s, 1.4s, 1.6s;
}

div{
    transition:
        color 200ms,
        border-width 180ms ease-in 200ms,
        border-color 160ms ease-out 400ms,
        border-radius 140ms ease-in-out 600ms,
        transform 120ms linear 800ms,
        opacity 100ms step-end 1s,
        box-shadow 1s step-start 1.2s,
        width 2s steps(5, start) 1.4s,
        padding 3s steps(3, end) 1.6s;
}

  3. 反向過渡: 退回起點

    • 逆轉中斷的過渡, 如果過渡還沒結束就被打斷了, 屬性的值將還原為過渡開始前的值

      瀏覽器 逆轉延遲 過渡時間 實耗時間
      Chrome 有 200ms 0.200s
      Safari 有 200ms 0.200s
      Firefox 有 38ms 0.038s
      Opera 有 200ms 0.250s
      Edge 無 38ms 0.038s

      若想覆蓋這些值, 在始態和終態中都要宣告過渡屬性, 這對逆向縮減機制雖然沒有影響, 但能進一步控制.

  4. 支援動畫的屬性和值

    • 判斷屬性是否支援動畫的關鍵是確定其取值能否內插.
    • 屬性值是如何內插的, 數字以浮點數內插, 整數以自然數內插, 以自然數的形式遞減或遞增
    • 內插重複的值, 複製到數目對應為止, 只有可內插的值才能出發 transitionend.

  5. 過渡是效果增強

  6. 列印過渡


4. 動畫

過渡, 屬性的始態和終態值由規則中設定的屬性值確定, 但是對時間段內值的變化方式沒有多少控制權, 動畫能做到中間的控制.

  1. 定義關鍵幀

    • 動畫的一般結構

      @keyframes animation_identifier{
    keyframe_selector{
        property: value;
        property: value;
    }
    keyframe_selector{
        property: value;
        property: value;
    }
}

      keyframe_selector 有兩種, 一種是 from 和 to, 一種是 0% 到100%

  2. 設定關鍵幀動畫

    • 為動畫命名, 名稱必須是表示符

  3. 關鍵幀選擇器

    • 有 from 和 to, 有 0% 到 100%
    • 省略 from 和 to 值, 瀏覽器會虛構, form to, 0%, 100%, 百分數可以為小數
    • 重複關鍵幀屬性, 後一個重複元素會覆蓋前面的元素
    • 支援動畫的屬性,
    • 不支援動畫但不被忽略的屬性, visibility 和 animation-timing-function
    • 通過指令碼編輯 @keyframes 動畫
      • appendRule(n), deleteRule(n), n 是關鍵幀的完整選擇符. 關鍵幀的內容可以通過findRule(n) 獲取. 刪除的最後一個選擇符
      • 動畫有三個事件, animationstart, animationend 和 animationiteration.

  4. 把動畫應用到元素上

    • 在元素上宣告動畫屬性的方式有兩種: 一種是單獨宣告各種屬性, 另一種是使用 animation 簡寫屬性一次性宣告全部屬性.

    • 指定動畫的名稱, animation-name, div{animation-name: a1, a2, w;}, 有不存在的會忽略. 如果動畫中有重複的屬性, 後面的動畫會覆蓋前面的動畫.

    • 定義動畫的時長, animation-duration, 單位為秒或毫秒, 有無效的時間, 比如負數, 沒帶單位, 整個都無效, 一般來說, name 有多少, duration 就有多少. 不對應也沒關係, 可以複製和忽略

    • 宣告動畫的迭代次數, animation-iteration-count, 希望結束後的動作, 動畫預設播放一次, 給數字迭代指定次數, 任何數字或關鍵字 infinite, 設為 0 時, 動畫依然播放, 只不過迭代 0 次, 這也會觸發 animationstart 和 animationend 事件

    • 設定動畫的播放方向, animation-direction, 取值, normal(預設), reverse(逆序), alternate(交替), alternate-reverse(交替, 第一次是逆序)

    • 延時播放動畫, animation-delay, 定義瀏覽器把動畫附加到元素上之後等待多久開始第一次迭代. 單位為秒或毫秒, 負的延遲是動畫在中途立即開始播放

    • 動畫事件, animationstart, animationiteration 和 animationend. 每個事件都有三個只讀屬性: animationName, elapsedTime 和 pseudoElement, 在所有瀏覽器中都無需使用字首.

      • animationstart 在動畫開始播放時觸發; 如有延遲, 等 animation-delay 設定的時間過後觸發; 否則立即觸發. 如果 animation-delay 為負值, animationstart 事件立即觸發;
      • animationend 事件在動畫播放結束時觸發, 如果 animation-iteration-count 為 infinite, 而且 animaiton-duration 設定的時間大於 0 , animationend 事件永不觸發. 如果把 animaiton-duration設成0秒, 或者預設, animationstart 和 animationend 事件基本上同時觸發.
      • animationiteration 事件在兩次迭代之間觸發. 迭代結束後動畫也結束的話, 觸發animationend 事件.
      • 可以利用 animation-delay 屬性把多個動畫串在一起, 讓下一個動畫在前一個動畫結束後立刻開始
      .raibox{
    animation-name: red, orange, yellow, blue, green;
    animation-duration: 1s, 3s, 5s, 7s, 11s;
    animation-delay: 3s, 4s, 7s, 12s, 19s;
}
      • 如果想讓一組列表元素按順序播放動畫, 各列表元素的 animation-delay 值要等於前一個動畫的 animation-duration 和 animation-delay 值之和.
      • 為了提升效能, 只要可能, 就應該把 transform 和 opacity 放在動畫中, 而 top, left, bottom, right 和 visibility 則不要這麼做
      • 使用 javascript, 監聽 animationend 事件啟動後續動畫, 從而實現動畫鏈. 在播放動畫的過程中改變動畫屬性的值對動畫沒有影響, 但是刪除或增加 animation-name 宣告卻有影響. 此外, 在元素上設定display: none 將終止動畫. 把 display 改成元素可見的值, 動畫將從頭開始播放.
      • 延遲動畫中的迭代, 若想在迭代之間新增不同的延遲, 可以建立一個動畫, 實現三種不同的延遲, 有一種方法適用於多數瀏覽器, 而且動畫規範也提到了: 多次應用同一個動畫, 每次設定不同的 animation-delay 值. 模擬animation-iteration-delay 屬性最安全, 最可靠, 也是跨瀏覽器支援最好的方法是使用動畫事件, 觸發 animationend 事件, 從元素上拆離動畫, 等到迭代延遲結束後再重新附加. 如果迭代之間的延遲都相等, 可以使用 setInterval, 如果不同, 使用 setTimeout

    • 改變動畫的內部時序, animation-timing-function, 取值, ease(預設值), linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps, cubic-bizer;

      • 步進時序函式, step-start, step-end 和 steps(), steps() 時序動畫把動畫分成一系列等長的步幅. steps() 接受兩個引數: 步數和變化點.

      • 以動畫形式改變時序函式, animation-timing-function 屬性不支援動畫, 但是可以放在關鍵幀中, 修改動畫的當前時序. 在某個關鍵幀中設定的 animation-timing-function, 只應用到那個關鍵幀中定義的屬性上. 模擬小球的摩擦力

        @keyframes bounce{
    0%{
        transform: translateY(0);
        animation-timing-function: ease-in;
    }
    30%{
        transform: translateY(100px);
        animation-timing-function: ease-in;
    }
    58%{
        transform: translateY(200px);
        animation-timing-function: ease-in;
    }
    80%{
        transform: translateY(300px);
        animation-timing-function: ease-in;
    }
    95%{
        transform: translateY(360px);
        animation-timing-function: ease-in;
    }
    15%, 45%, 71%, 89%, 100%{
        transform: translateY(380px);
        animation-timing-function: ease-out;
    }
}

    • 設定動畫的播放狀態, 使用 animation-play-state, 取值 running, paused, 在執行和延遲時暫停, 時間都停止

    • 動畫的填充模式, animation-fill-mode 屬性定義動畫播放結束後是否應用原來的值, 取值, none(預設值), forwards, backwards, both

      • 設為 backwards 時, 0% 或 form 關鍵幀 (如果有的話) 中定義的屬性值在動畫應用到元素上的那一刻就起作用.
      • forwards 值的意思是動畫播放結束後, 即 animation-iteration-count 設定的迭代次數全部結束, 觸發了 animationend 事件, 當前的屬性值繼續應用在元素上.
      • both 值包含 backwards 和 forward 兩個值的效果, 即把動畫附加到元素上之後立即應用屬性值, 而且觸發animationend 事件之後, 屬性的值得以保留.

  5. 寫為一個屬性

    • animation 簡寫, 0是ease0是1 normal none running none.

      #animated{
    animation: 200ms ease-in 50ms 1 normal running forwards slidedown;
}
#animated{
    animation-name: slidedown;
    animation-duration: 200ms;
    animation-timing-function: ease-in;
    animation-delay: 50ms;
    aniamtion-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-play-state: running;
}

  6. 動畫, 特指度和優先順序

    • 特指度和 !important, 不要在動畫宣告塊中使用 !important. 這樣做是無效的, 反而會導致相應的屬性和值被忽略
    • 動畫順序, 如果有多個動畫為同一個屬性指定了不同的值, 最後一個應用的動畫將覆蓋之前動畫中宣告的值
    • display: none; 對動畫迭代的影響, 如果把元素的 display 屬性設為 none, 元素或其後代上的動畫迭代將停止, 好似把動畫從元素上拆離了一樣, 把 display 屬性變為某個可見的值之後, 所有動畫屬性重新應用到元素上, 動畫將從頭開始播放:
    • 動畫和 UI 執行緒. CSS 動畫在使用者介面 (UI) 執行緒中的優先順序最低. 如果頁面載入時附加了多個動畫, 而且 animation-delay 為正值, 延遲結束後倘若 UI 執行緒不可用, 動畫不會播放

  7. 癲癇和前庭功能失調

    • 視覺變化, 尤其是快速的視覺變化, 可能導致癲癇病人發作. 此外, 還有可能導致前庭功能失調(暈動病) 人群產生多種不適. 瀏覽器新增了一個媒體查詢: prefers-reduced-motion

  8. 動畫事件及其字首

    • animationstart, animationstart 事件在動畫開始時觸發. 如果動畫有延遲, 延遲結束後才觸發了這個時間, 如果沒有延遲, animationstart 事件仍然觸發. 如果一個元素上應用了多個動畫, 每個有效的關鍵幀動畫都將會觸發一次 animationstart 事件.
    • animationend, animationend 事件在動畫結束時觸發
    • animationiteration 事件在動畫的一次迭代結束之後和下一次迭代開始之前觸發, 如果沒有迭代, 或者迭代次數小於或等於1, animationiteration 事件不觸發. 主要取決於迭代次數

5. 濾鏡, 混合, 裁剪和遮罩

創作人員可以使用視覺濾鏡調整元素的外觀, 以不同的方式與背後的內容混合

  1. CSS濾鏡

    • filter, 取值, none(預設), blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), sepia(), saturate(), url(); 任何 HTML 元素都可以使用濾鏡
    • 基本濾鏡
      • blur(<length>), 使用高斯模糊對元素的內容做模糊處理, 標準偏差由 lenght 值定義, 不能為負
      • opacity, 把透明度濾鏡應用到元素上, 0和1, 0%到100%. 大於1或100% 取整
      • drop-shadow, 建立與元素的 alpha 通道形狀一致的投影, 帶模糊效果, 而且可以指定顏色. 長度和顏色的處理方式與 box-shadow 屬性一樣, 在透明圖片上有效果
    • 顏色濾鏡, 不能為負值
      • grayscale, 把元素的顏色變成指定的灰階.0-1, 0%-100%
      • sepia, 把元素的原色變成指定額墨色調 #704214
      • invert, 把元素所有的顏色做反相處理. 值為0.5或50%, 得到均勻的灰色
      • hue-rotate, 在色輪上旋轉色相, 而飽和度和明度保持不變
    • 亮度, 對比度和飽和度
      • 這些 filter 函式也用於操控顏色, 而且操控的方式有很大的關聯性
      • brightness, 調整元素上顏色的亮度
      • contrast, 調整元素上顏色的對比度
      • saturate, 調整元素上顏色的飽和度
    • svg 濾鏡
      • url(<uri>)

  2. 合成和混合

    • 混合元素, min-blend-mode, 取值, normal(預設值), multiply, screen, overlay, darken, lighten, color-dodge, color-burn,hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity .
      • 應用 mix-blend-mode 屬性的元素是前景
      • 位於元素背後的是揹著物. 可以是另一個元素, 也可以是父元素的背景等
      • 畫素分量 (pixelcomponent) 是某個畫素的顏色分量
    • 變亮, 變暗, 插值和排除
      • darken, 前景中的每個畫素和揹著物中相應位置上的畫素比較, 比較 R, G 和 B 的值, 保留較小的值.
      • lighten, 與darken相反.
      • difference, 取兩者之差的絕對值
      • exclusion, 是 difference 的溫和版本, 所用公式不是 |back-fore|, 而是 back+fore-(2*back*fore), back 和 fore 是0-1的數
    • 正片疊低, 濾色和疊加
      • multiply, 前景中的每個畫素分量與背對無中對應位置上的畫素分量相乘
      • screen, 對前景和揹著物中同一位置上的畫素分量做反相處理, 相乘後再反相. 與multiply一樣, screen 是對稱的
      • overlay, 這個混合模式是對 multiply 和 screen 的綜合應用. 如果前景中的畫素分量比 0.5 暗, 執行multiply 操作, 如果大於0.5, 則使用 screen.
    • 強光和柔光
      • hard-light, 這個混合模式的作用與 overlay 相反.
      • soft-light, 這個混合模式是 hard-light 的柔和版本, 執行的操作時相同的, 只不過效果有所緩和. 霧的效果
    • 顏色減淡和加深
      • color-dodge, 前景中的各畫素分量做反相處理, 再拿揹著物中對應的畫素分量除以反相後的前景值, 得到的結果是揹著物變得更亮
      • color-burn, 這個混合模式與 color-dodge 的作用相反
    • 色相, 飽和度, 明度和顏色
      • hue, 把揹著物中每一畫素的明飽和度與前景中對應畫素的色相角度合併
      • saturation, 把揹著物中每一畫素的色相角度和明度與前景中對應畫素的飽和度合併
      • color, 把揹著物中每一畫素的明度與前景中對應畫素的色相角度和飽和度合併
      • luminosity, 把揹著物中每一畫素的色相角度和飽和度與前景中對應畫素的明度合併
      • 元素始終與揹著物混合在一起. 如果背後是其他元素, 就與背後的元素混合; 如果背後是父元素的背景, 則與父元素的背景混合
      • 改變混合後元素的不透明度將對結果產生影響, 但是影響的方式可能與你想的不一樣

  3. 與背景混合

    • 如果一個元素有多個背景圖, 而且背景圖有重疊, 此時就要用到 background-blend-mode 屬性了, background-blend-mode, 取值, normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity
    • 區別在於, 把多個背景圖混合在一起時, 各背景圖是與一個空的背景在合併, 即一個完全透明, 沒有顏色的揹著物.
      • 獨立混合, isolation, 取值, auto, isolate. 這個屬性的作用: 指明是否為元素定義獨立的混合上下文.
      • 特別注意 isolation 和 min-blend-mode 是應用在哪個元素上的. 但有個例外, 建立堆疊上下文的元素自動獨立出來, 而不管 isolation 屬性為什麼值.

  4. 裁剪和遮罩

    • 裁剪, clip-path, 取值, <url>, inset(), circle(), ellipse(), polygon(), pader-box, padding-box, content-box, margin-box, fill-box, stroke-box, view-box. 作用是定義裁剪形狀
    • 裁剪形狀
      • inset(), 值為一到四個長度值或百分數, 定義距範圍框各邊的偏移量. 可以使用 round 關鍵字, 或者另一組一到四個字或百分數定義圓角
      • circle(), 只接受一個值, 為長度, 百分數或關鍵值, 定義圓的半徑. 在一或兩個長度或百分數後可以使用 at 關鍵字指定圓心的位置
      • ellipse(), 值必須為兩個長度, 百分數或關鍵字, 定義橢圓在縱軸和橫軸上的半徑, 在一或兩個長度或百分數後可以使用 at 關鍵字指定橢圓中心的位置
      • polygon(), 一系列以逗號分隔的 x 和 y 座標指, 在座標值前面可用關鍵字定義多邊形的填充規則.
    • 裁剪框, 裁剪框不使用長度或百分數指定. 多數時候, 裁剪框直接對應於盒模型中的邊界.
      • view-box, 使用最近的 SVG 視區 (即最近的祖輩) 作為裁剪框
      • fill-box, 使用物件範圍框作為裁剪框.
      • stroke-box, 使用描邊範圍框作為裁剪框.
    • 裁剪填充規則, 這個行為由 clip-rule 屬性控制, 取值 nonzero(初始值), evenodd, 很多不支援

  5. 蒙版

    • 蒙版的意思是, 位於形狀內部的內容可見, 而在形狀外部的內容不可見

    • 定義蒙版, mask-image, 取值, none, <image>, <mask-source>, 使用 img.masked{mask-image: url(theatre-masks.svg);}

      定義蒙版

      <svg viewbox="0 0 100 100" height="100" width="100"
	xmlns="http://www.w3.org/2000/svg" version="1.1">
	<mask id="hexlike">
		<path fill="#FF0000" d="M 50,0 100,25 100,75 50,100 0,75 0,25"/>
	</mask>
</svg>

.masked{mask-image: url(#hexlike);} /*內部應用*/
.masked{mask-image: url(masks.svg#hexlike);}

    • 改變蒙版的模式, mask-mode, 取值, alpha, luminance, match-source(初始值), luminance使用亮度值計算蒙版.. 初始值是 alpha 和 luminance 的結合體

    • 調整蒙版的尺寸和重複方式, mask-size, 取值, cover, contain, <length>, <percentage>, 重複模式, mask-repeat, 取值, repeat-x, repeat-y, repeat, space, round, no-repeat

    • 定位蒙版 mask-position, 定位蒙版, mask-origin, 取值, content-box, padding-box, border-box, margin-box, fill-box, stroke-box, view-box

    • 裁剪和合成蒙版, mask-clip. 對背景而言, 對應的屬性是 background-clip, 取值, content-box, padding-box, border-box(預設), margin-box, fill-box, stroke-box, view-box, no-clip

    • 最後一個蒙版屬性 mask-composite 相當有趣, 他能從根本上改變多個蒙版的合成方式. mask-composite, 取值, add, subtract, intersect, exclude

    • 寫為一個屬性

      #example{
    mask-image: url(circle.svg), url(square.png), url(triangle.gif);
    mask-repeat: repeat-y, no-repeat;
    mask-position: top right, center, 25% 67%;
    mask-composite: subtract, add, add;
    mask-size: auto, 50% 33%, contain;
}

#example{
    mask:
        url(circle.svg) repeat-y top right / auto subtract,
        url(square.png) no-repeat center / 50% 33% add,
        url(triangle.gif) repeat-y 25% 67% / contain add;
}

    • 蒙版型別, mask-type, 取值, luminance, alpha, 與 mask-mode 十分相似, 但是不支援 match-source值. mask-mode優先順序更高

    • 遮罩邊框影像, 沒有瀏覽器支援

      • mask-border-source, 指向一個影像, 用作蒙版
      • mask-border-slice, 定義如何裁切原圖
      • mask-border-width, 定義元素四周邊框區域的具體寬度
      • mask-boder-outset, 定義與元素的預設邊框相距一段距離的位置
      • mask-border-repeat, 設定原圖的切片未完全佔滿邊框區域時採用何種重複模式
      • mask-border-mode, 宣告使用 alpha 蒙版模式還是明度蒙版模式
      • mask-border, 簡寫屬性, 涵蓋前面各個屬性

  6. 物件填充和定位

    • 還有一種遮罩只適用於之後元素, 例如影像. 使用 object-fit 屬性可以改變置換元素在元素框中填充的方式, 或者並不完全填滿元素框.
      • object-fit, 取值, fill(預設), contain, cover, scale-down(與none或contain相同), none.
      • object-positon, 預設50%, 50% 置換元素比元素框大或小的對齊方式, 溢位的將被裁剪

6. 針對特定媒體的樣式

CSS 提供了數種工具, 以便針對特定的媒體或具有特定功能的媒體應用樣式

  1. 定義針對特定媒體的樣式

    • 基本的媒體查詢

      <link rel="stylesheet" type="text/css" media="screen, speech"
      href="visual.css">

      @import url(visual.css) screen;
@import url(outloud.css) speech;
@import url(article-print.css) print;

@media screen{
	body{}
}
@media print{
    body{}
}
      • all 所有能呈現內容的媒體
      • print 列印給非盲使用者看的文件, 或者是文件的列印預覽
      • screen 呈現文件的螢幕媒體, 例如桌上電腦的顯示器或手持裝置
      • speech 語言合成器, 螢幕閱讀器或其他音訊渲染裝置

    • 複雜的媒體查詢

      • and 把兩個或更多的媒體特性連在一起, 每一個特性的結果都必須為 true, 整個查詢的結果才是 true

      • not 對整個查詢的結果取反, 如果所有條件都滿足, 不應用樣式表. not 關鍵字只能在媒體查詢的開頭使用.

      • only 在不支援媒體查詢的舊瀏覽器中隱藏樣式表

      • 媒體特性描述符, 而且特性描述符必須放在圓括號中, width, min-width, max-width, height, min-height, max-height, device-width, min-device-width, max-device-width, device-height, min-device-height, max-device-height, aspect-ratio, min-aspect-ratio, max-aspect-ratio, divice-aspect-ratio, min-divice-aspect-ratio, max-divice-aspect-ratio, color, min-color, max-color, color-index, min-color-index, max-color-index, monochrome, min-monochrome, max-monochrome, resolution, min-resolution, max-resolution, orientation, scan, grid.

      • 新值型別, <ratio>, <resolution>

      • 響應式設計

        /*通用樣式*/
@media (max-width: 400px){
    /*這是針對小屏裝置的樣式*/
}
@media (min-width: 401px) and (max-width: 1000px){
    /*這是針對中屏裝置的樣式*/
}
@media (min-width: 1001px){
    /*這是針對大屏裝置的樣式*/
}

  2. 分頁媒體

    • 分頁媒體指使用一系列單獨的 "頁面" 呈現文件的媒體
    • 螢幕與印刷品的區別, 無襯線字型最適合螢幕設計, 而襯線字型在印刷品上可讀性更好, 在web 中千萬別使用點數
    • 定義頁面尺寸. 頁面區域, 外邊距區域, 頁面框, @page 中設定, size 屬性用於定義頁面框的具體尺寸, @page{size: 7.5in 10in; margin: 0.5in;}
    • 選擇頁面型別 @page normal 或 @page rotate
    • 分頁, page-break-before, page-break-after, 或 page-break-inside
    • 孤行和寡行, windows, orphans

相關文章