CSS3鼠標滑過按鈕動畫是一種通過 CSS3 動畫技術實現按鈕的鼠標滑動效果。該技術可以讓用戶在不同的狀態之間切換，同時保持流暢的動畫效果。

在 CSS3 中，我們可以使用動畫效果來創建交互式元素，例如按鈕、表單、輪播圖等。通過在按鈕元素中添加一個 `@keyframes` 規則，定義一系列的動畫操作，并在每個操作后面添加一個 `name` 屬性，用于指定操作的名稱。然后，我們可以將這些動畫操作應用到按鈕元素的各種屬性中，例如 `background-color`、`text-align`、`border-radius` 等。

下面是一個基本的 CSS3 鼠標滑過按鈕動畫的示例代碼：

```html

<button class="button">點擊我</button>

```css

.button {

position: relative;

width: 100px;

height: 100px;

background-color: blue;

text-align: center;

border-radius: 50%;

.button:hover {

animation: move 1s infinite;

@keyframes move {

0% {

transform: translate(0, 0);

100% {

transform: translate(0, 100px);

在上面的代碼中，我們定義了一個名為 `move` 的動畫操作，它使用 `translate` 操作將按鈕元素移動到其起始位置和目標位置之間。在 `@keyframes` 規則中，我們定義了按鈕元素的 `background-color`、`text-align`、`border-radius` 等屬性在不同狀態之間的變化。例如，當鼠標懸停在上面時，`background-color` 將變為綠色，`text-align` 將變為 center,`border-radius` 將變為 50%。

通過使用 CSS3 動畫技術，我們可以創建出各種復雜的交互式元素，例如輪播圖、表單驗證、多輪對話等。這種技術不僅可以實現漂亮的動畫效果，還可以大大提高網頁的用戶體驗和交互性。