如何為網站增添活力和動感 – Shaking Animation CSS

現代網站設計中，除了考慮布局、配色、字體等基本素材，增加動態效果也是很重要的一部分。然而，實現這些動態效果可能需要大量的Javascript代碼才行，對有些設計師來說卻可能並不容易。不過，近年來CSS技術的不斷發展，也使得它在實現動態效果方面擁有了更大的實用價值。本文將為讀者講解如何利用CSS中的一些特性和技巧，實現一些簡單易用的動態效果，為網站增添一些活力和動感。

一、晃動效果

令網頁元素髮生晃動效果是最常用的動態效果之一，一些網站中的按鈕在被點擊時就會產生這種效果。下面是一些示例代碼。

/* CSS代碼 */
@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 0); }
  20% { transform: translate(10px, 0); }
  30% { transform: translate(-10px, 0); }
  40% { transform: translate(10px, 0); }
  50% { transform: translate(-10px, 0); }
  60% { transform: translate(10px, 0); }
  70% { transform: translate(-10px, 0); }
  80% { transform: translate(10px, 0); }
  90% { transform: translate(-10px, 0); }
  100% { transform: translate(0, 0); }
}

/* HTML代碼 */
點擊我

對於上述代碼，我們使用了CSS中的「@keyframes」語法糖來定義一個名為「shake」的動畫效果，其中「transform: translate(x,y)」表示對元素進行位置平移。同樣，也可以應用此技巧在輸入框中加入一個類似消除抖動的動態效果，示例代碼如下：

/* CSS代碼 */
@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 0); }
  20% { transform: translate(10px, 0); }
  30% { transform: translate(-10px, 0); }
  40% { transform: translate(10px, 0); }
  50% { transform: translate(-10px, 0); }
  60% { transform: translate(10px, 0); }
  70% { transform: translate(-10px, 0); }
  80% { transform: translate(10px, 0); }
  90% { transform: translate(-10px, 0); }
  100% { transform: translate(0, 0); }
}

/* HTML代碼 */

二、滑動效果

除了在動畫完成時實現晃動效果，在元素進入屏幕時產生滑動效果也是有用的動態效果之一。通過在CSS代碼中應用「@keyframes」語法以及「transform: translate(x,y)」和「opacity」屬性，就能實現這一目標。下面是一個簡單的示例代碼：

/* CSS代碼 */

@keyframes slide-in {

from { transform: translateX(-100%); opacity: 0; }

to { transform: translateX(0); opacity: 1; }

}
.slide-in {
 animation: slide-in 0.5s ease-out;
}
/* HTML代碼 */
歡迎來到我的網站！
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/291126.html