CSS 網頁滾動特效：ScrollTrigger 滾動觸發｜陪伴開發｜老師陪我 Coding #11

css實作:實現滑鼠懸停後的上下左右抖動效果 當我們打造網站時，細微的互動設計往往能讓整個網頁更有生命力。 今天，我要和大家分享一個簡單卻很有趣的小技巧：當滑鼠懸停在一個元素上，讓它先上下抖動幾下，然後接著左右抖動。

原理 滑鼠點擊產生一個 div 像這樣 <div class="clickEffect">，然後定義 clickEffect 的 CSS 產生動畫效果 -- RippleButtons.js RippleButtons.js - a tiny standalone library for adding ripple animations to your website (holloway.github.io)

透過 CSS pointer-events 樣式屬性，可以在元素互相重疊時，穿透上層元素藉此點擊到下層元素，這篇教學會介紹 CSS pointer-events 樣式屬性在 SVG 元素與非 SVG 元素的差異，以及如何製作「穿透」的點擊或懸停 ( hover ) 效果。

我們在設計鼠標的時候，大致上分為三種狀態：原始、滑鼠點擊、碰到連結三種，但實際上需要幾種需要視專案的需要、自身的技術而定。

瞭解如何使用 CSS 新增滑鼠懸停過渡效果。 CSS 過渡允許您在給定持續時間內平滑地更改屬性值（從一個值到另一個值）。 前往我們的 CSS 過渡教程 瞭解更多關於過渡的知識。

這30種滑鼠滑過按鈕的動畫特效分別使用CSS3 transition和transform屬性來製作按鈕邊框，文字動畫以及流光動畫效果，各種效果都非常有創意。

CSS的滑鼠游標屬性：cursor CSS的cursor屬性可以改變滑鼠游標的形狀， 當滑鼠移過去時，就會顯示自設定的形狀。 共有以下這些屬性值 Crosshair、pointer、text、move、wait、help、progress、 not-allowed、no-drop、no-vertical-text、all-scroll、col-resize、