CSS動畫技術可以讓頁面動態化，提升用戶體驗。其中，圓形動畫是較為常見的一種效果。下面將介紹如何使用CSS將正方形變圓。

首先，在CSS中定義一個正方形容器，設置寬高相等，比如設置為100px：

.square {
width: 100px;
height: 100px;
background-color: #f00;
}

接下來，我們需要讓這個正方形容器變成圓形。可以使用border-radius屬性實現：

.square {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
}

注意，這里的border-radius屬性值為50%，將正方形容器變成了圓形。

接著，為了讓這個圓形具有動畫效果，我們需要使用transition屬性。以下代碼實現了一個0.5秒的動畫效果：

.square {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
transition: all 0.5s ease;
}

可以看到，通過設置transition屬性，我們可以定義動畫過渡效果、過渡時間和過渡方式。

最后，為了讓這個圓形具有hover效果，可以在:hover偽類下再次定義transition屬性，使得鼠標移到圓形上時圓形會有一個縮小效果。以下是具體代碼：

.square:hover {
transform: scale(0.9);
transition: all 0.5s ease;
}

使用transform屬性實現縮小效果。

通過以上代碼，我們成功將一個正方形變成了圓形，并且具有縮小hover效果。這種簡單的動畫效果可以提高網站的美觀性和用戶體驗，值得我們去學習和掌握。