CSS交互動效是網頁設計中的一個重要組成部分。通過添加CSS動畫和交互效果，可以使網頁更加生動有趣，增加用戶體驗和滿意度。 以下是一個示例CSS代碼，實現了一個簡單的按鈕交互動效：

.button {
display: inline-block;
padding: 10px 20px;
text-align: center;
border: 2px solid #ccc;
border-radius: 5px;
transition: all 0.3s ease;
}
.button:hover {
background-color: #ccc;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.button:focus {
outline: none;
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.button:active {
background-color: #555;
color: #fff;
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

這段代碼定義了一個按鈕樣式，包括大小、邊框、文本對齊方式、邊框半徑等屬性。通過使用:hover、:focus和:active偽類，實現了在不同的交互狀態下的樣式變化和動畫效果。 當鼠標懸停在按鈕上時，按鈕會變成灰色背景和白色文本，同時向上移動2像素，并在底部顯示一個輕微陰影。當用戶在按鈕上點擊鼠標時，按鈕的背景顏色將變成深灰色，文本顏色變為白色，并通過向下移動按鈕來模擬按下效果。最后，當用戶停止點擊按鈕時，它將返回其初始狀態。 通過使用類似這樣的CSS交互動效代碼，設計網頁時可以提高用戶的體驗感，同時也可以增加網站的交互性和吸引力。