CSS Wobble 教程

一、什麼是 CSS Wobble？

CSS Wobble 是一種使用 CSS 動畫實現的抖動效果。這種效果模擬了物體或元素在震動或顫動的情況，常被用作 UI 設計中的鼠標懸停或點擊效果。

在 CSS 中，Wobble 效果一般使用 transform 屬性中的 rotate、translate 和 skew 函數來實現，通過不斷改變這些屬性值的大小和方向，就可以實現元素的抖動效果。

以下是一個簡單的 CSS Wobble 動畫示例：

.wobble {
  transform: rotate(2deg);
  animation-name: wobble;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes wobble {
  0% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}

二、CSS Wobble 的應用場景

除了常見的鼠標懸停或點擊效果，CSS Wobble 在其他 UI 設計中也有廣泛應用。

例如，當用戶輸入錯誤時，可以在提示信息的文本框周圍應用 Wobble 效果，以引起用戶的注意。另外，Wobble 還可以用作某些元素的背景特效，比如按鈕、圖片等。

以下是一個簡單的錯誤輸入提示框動畫示例：

.shake {
  animation-name: shake;
  animation-duration: 0.5s;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-20px);
  }
  50% {
    transform: translateX(20px);
  }
  75% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}

三、如何自定義 CSS Wobble 效果

除了使用預設的 Wobble 動畫模板外，我們也可以根據需要自定義 Wobble 效果。以下是一些常見的方式：

1、改變動畫觸發的條件和時間，例如鼠標懸停、點擊或其他特定事件觸發。

2、改變動畫的方向、速度和幅度，通過調整動畫屬性的值來實現。其中 transform 的 rotate 和 translate 屬性可用來控制抖動的方向和幅度，而 animation-duration 屬性可用來控制動畫的速度。

3、通過添加其他動畫效果與 Wobble 配合使用，實現更豐富的 UI 特效。例如可以配合使用 opacity、color 等屬性實現透明漸變、文字顏色變化等效果。

以下是一個自定義 Wobble 效果的示例：

.custom-wobble {
  animation-name: custom-wobble;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: center;
}

@keyframes custom-wobble {
  0% {
    transform: translateX(0) translateY(0) rotate(0);
  }
  10% {
    transform: translateX(-50px) translateY(-20px) rotate(-10deg);
  }
  20% {
    transform: translateX(40px) translateY(-20px) rotate(10deg);
  }
  30% {
    transform: translateX(-30px) translateY(20px) rotate(-15deg);
  }
  40% {
    transform: translateX(20px) translateY(20px) rotate(10deg);
  }
  50% {
    transform: translateX(-10px) translateY(-10px) rotate(-5deg);
  }
  60% {
    transform: translateX(5px) translateY(5px) rotate(0);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
  }
}

.custom-wobble:hover {
  background-color: #eee;
}

四、結語

CSS Wobble 效果可以為界面設計帶來一定的活力和趣味性，也讓用戶對網站的功能和信息更加關注。希望本文介紹的內容對你能夠有所幫助，讓你在開發過程中更加遊刃有餘。