美化水平分隔線

  • 默認的水平分隔線 <hr> 都很醜，大部分前端框架默認上也不會特別裝飾它，所以我們可以自己在 css 中美化一下：

    1
    2
    3
    4
    5
    6
    hr {
        border: 0;
        height: 1px;
        background: #333;
        background-image: linear-gradient(to right, #ccc, #333, #ccc);
    }
    • 效果：分隔線

  • 另外，hr 是什麼的縮寫？是 horizontal rule。

文字點擊特效

  • 註定一生替自己宣傳的我，點擊特效也要上廣告。

  • 兩個步驟：

    1. 在 <head> 中引用 jquery

    2. 引用以下 script

      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
      var a_idx = 0;
      $("body").click(function(e) {
          var a = new Array(
              "YT搜尋劉昕",
      		"Spotify搜尋劉昕",
      		"KKbox搜尋劉昕"
              );
          const col = [
          "#FFAAAA","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF"
          ];
          var $i = $("<span/>").text(a[a_idx]);
          a_idx = (a_idx + 1) % a.length;
          var x = e.pageX,
          y = e.pageY;
          $i.css({
              "z-index": 144469,
              "top": y - 20,
              "left": x,
              "position": "absolute",
              "font-weight": "bold",
              "color": col[Math.floor((Math.random()*col.length))]
          });
          $("body").append($i);
          $i.animate({
              "top": y - 180,
              "opacity": 0
          },
          1500,
          function() {
              $i.remove()
          })
      });

毛玻璃卡片

在 css 中定義個 class：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.pane {
  background: hsla(0,0%,100%,.3);  
  position: relative;
  overflow: hidden;
}

.pane::before {
  content: '';
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  filter: blur(30px);
  z-index: -1;
  margin: -30px;
}

連結特效

在 css 中定義個 class：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
a {
	text-decoration: none;
	color: #000;
	font-weight: 400;
}

a:link {
	background-position-y: 20%;
	background-image: linear-gradient( transparent 50%, gold 50%);
	transition: background 500ms ease;
	background-size: 2px;
	background-size: auto 175%;
}

a:hover {
	color: #666;
	background-position-y: 100%;
}

打字特效（Typed.js）

  • 很多網頁都愛用的特效，但不懂 Javascript 的話就連複製貼上使用都有點難度。

  • 兩個步驟：

    1. 使用 CDN 引入

      1
      <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

    2. 直接在要使用的地方 <span> 進去

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      <p>
      	<span id="typed"></span> //可以改 style
      </p>

      <script>
        var options = {
          strings: ["內容1",
                    "內容2",
                    "內容3"],
          typeSpeed: 100,
          startDelay: 330,
          loop: true,
        };
        var typed = new Typed('#typed', options);
      </script>

  • 倒也不是因為懶，只是真的很容易忘記更新啦……

  • 好在非常簡單，用一點 script 即可：

1
2
3
<script>
	document.write(new Date().getFullYear())
</script>

簡單的 CSS 動畫

  • 要問我「如何快速增加網頁質感」的話，首選答案就是「動畫」。

  • 動畫可以快速幫網頁添加「升級感」，常有畫龍點睛之效！

  • 另一個答案我會說是「陰影」，不過這個不難，CSS library 都內建了。

  • 而目前最直觀易用的專案應該就是 animate.css 了，只要添加一行 CDN 就可以直接往 class 裡面塞動畫，然而：

    • 因為是純 CSS，沒辦法「滑到相對應的頁面才觸發動畫」
    • 如果在「輔助使用」中開啟「減少動畫」的話，動畫也會失效（非常良善的立意，但我就是那個平常為了操作交互可以更快速而關掉動畫效果的那種人）

  • 如果要做到「滑到才觸發」，那就該使用 aos （Animate On Scroll）才是

    • 只需要 CDN 一行 CSS

      1
      <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    • 然後 CDN 一行 JS

      1
      2
      3
      4
      <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
        <script>
          AOS.init();
        </script>

    • 就可以使用了

      1
      <div data-aos="fade-in" data-aos-duration="1000"></div>