CSS是一種強大的樣式表語言，可以使網站更加美觀，同時提供了許多動畫效果來吸引用戶的眼球。其中最常見的動畫就是寬度改變動畫。通過CSS中的transition屬性和width屬性，我們可以輕松地制作寬度改變動畫。

/* HTML代碼 */
/* CSS代碼 */
.box {
width: 200px;
height: 100px;
background-color: red;
transition: width 0.5s ease;
}
.box:hover {
width: 400px;
}

在上面的代碼中，我們使用了一個DIV元素來創(chuàng)建一個紅色盒子，設置了其初始寬度為200像素和高度為100像素。我們通過CSS的transition屬性進行寬度改變動畫的設置，這里的屬性值包括寬度和時間，使用了ease緩動函數，使動畫看起來更加自然。

通過使用:hover偽類選擇器，在鼠標放置在盒子上時改變寬度屬性的值，制作出一個簡單的寬度改變的動畫效果。鼠標離開盒子，寬度也會自動回到原始的值。

總結來說，CSS寬度改變動畫可以通過transition屬性和width屬性輕松設置。緩動函數的使用可以使動畫更加自然流暢。通過使用:hover偽類選擇器可以實現交互性的動畫效果，讓你的網站更加吸引人。