目錄

【前端動手玩創意】等待的轉圈圈效果 (1)

【前端動手玩創意】google五星評分的星星(2)

【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)

【前端動手玩創意】一句CSS做出好看的hero section！(4)

【前端動手玩創意】創造一個Skill bar(5)

【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)

【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)

【前端動手玩創意】讓你的PDF檔案更難被抓取(8)

【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)

【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)

超好看的穿透文字效果

神奇的一句css

mix-blend-mode

MDN的用法解說

我們的用法就是: mix-blend-mode: screen;

html原始碼寫法

<div class="image-container">
  <div class="text">NATURE</div>
</div>

很簡單就只是兩個div。
一個放圖片，一個寫文字。

CSS原始碼寫法

就很基本，只要把圖片放在背景就可以了。

.image-container {
  background-image: url("img_nature.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}

.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

心得後記

CSS的世界真的是很大很廣闊，有時候一句關鍵的語法就可以達到很讚的效果！