EP04 | 跟著影片做前端切版練習 - CSS Mix Blend Mode Text Scrolling Effects

發表於 更新於 分類於 ， ， ，

練習影片

練習重點

參考資料：

《CSS3 mix-blend-mode 》網頁版的Photoshop圖層混合模式

CSS保健室｜mix-blend-mode

結構

HTML

1
2
3
4
5
6
7
<body>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <div class="text">text</div>
</body>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap');
.text {
  font-family: "Balsamiq Sans", cursive;
  /*固定文字在頁面上的位置*/
  position: fixed;
  top: 50%;
  left: 50%;
  text-transform: uppercase;
  font-size: 10em;
  transform: translate(-50%, -50%);
  padding: 2px 20px;
  /*文字顏色視為文字的背景色，使用mix-blend-mode: difference時，如果文字背景色是黑色的話，將不會有任何改變*/
  color: #fff;
  border: 10px solid #fff;
  mix-blend-mode: difference;
}
section {
  width: 100vw;
  height: 100vh;
}
/*需要注意:nth-child的算法*/
section:nth-child(1) {
  background: #fff;
}
section:nth-child(2) {
  background: #000;
}
section:nth-child(3) {
  background: #e52b50;
}
section:nth-child(4) {
  background: #fdee00;
}

小提醒

試了很久才發現，原來使用 mix-blend-mode 時，直接將文字顏色當成文字背景色來看待會比較簡單理解，並且在不同混和模式中，部分顏色是不會有任何變化的(可以再多嘗試看看)，像是文字顏色設為黑色，在 mix-blend-mode: difference 時，就不會有變化。

Demo:

See the Pen 前端練習04 - CSS Mix Blend Mode Text Scrolling Effects by Celeste6666 (@celeste6666) on CodePen.