CSS是網頁設計中不可或缺的一部分，它可以用來控制頁面的布局、字體樣式、顏色等等。除此之外，CSS還可以用來寫交互效果，讓網頁更加生動、有趣。

要寫出好的交互效果，首先需要掌握一些CSS的基本知識。下面是一個例子，展示了如何通過CSS來制作按鈕的hover效果：

.btn {
display: inline-block;
padding: 10px 20px;
background-color: #f00;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
transition: background-color 0.2s ease;
}
.btn:hover {
background-color: #0f0;
}

以上代碼中，我們使用了:hover偽類來表示鼠標懸停時的樣式。同時，我們還通過transition屬性來實現了漸變的過渡效果，讓按鈕的顏色從紅色變為綠色。

除了使用偽類來實現交互效果外，我們還可以使用CSS動畫。下面是一個例子，展示了如何通過CSS來實現一個旋轉動畫：

.box {
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
animation: rotate 1s ease infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}

以上代碼中，我們使用了@keyframes關鍵字來定義了一個名為“rotate”的動畫。在動畫中，我們使用transform屬性來實現旋轉效果。最后，我們通過animation屬性來把該動畫應用到了.box類中。

總之，CSS的交互效果讓我們可以為網頁添加更多的樂趣和互動體驗。希望通過這篇文章的介紹，能夠幫助大家更好地掌握這方面的技能。