CSS是網(wǎng)頁中不可或缺的一部分。它能夠讓網(wǎng)頁看起來更加美觀，同時也可以給用戶帶來更好的體驗。在CSS中，動畫寬度變化是一種常見的設(shè)計方式。下面我們就來看一下如何使用CSS和動畫寬度變化來讓網(wǎng)頁更具吸引力。

/* HTML部分 */
<div class="cover">
<div class="box"></div>
</div>
/* CSS部分 */
.cover {
width: 300px;
height: 50px;
position: relative;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
background-color: #ff6700;
position: absolute;
top: 0;
left: -100%;
animation: slide-in 2s ease-in-out infinite;
}
@keyframes slide-in {
0% {
left: -100%;
}
50% {
left: 0;
}
100% {
left: 100%;
}
}

在上面的代碼中，我們首先定義了一個名為“cover”的div，它的寬度為300px、高度為50px，設(shè)置為相對定位，并使用overflow:hidden屬性來隱藏盒子內(nèi)部溢出的內(nèi)容。接著，我們定義了一個名為“box”的div，它的寬度和高度都為100%。我們使用了絕對定位方式將“box”放置在“cover”內(nèi)部，同時將其left屬性設(shè)置為-100%。這樣“box”就被移到了“cover”的外部。

在CSS的最后，我們使用了CSS3的動畫功能來為“box”添加了一個名為“slide-in”的動畫。這個動畫的關(guān)鍵幀分別定義了動畫的開始、中間和結(jié)束狀態(tài)。初始狀態(tài)下，“box”的left為-100%，即開始狀態(tài)，經(jīng)過50%時間后，left變?yōu)?，即中間狀態(tài)，最終“box”完全進(jìn)入了“cover”的內(nèi)部，left屬性變?yōu)?00%。

通過這個實例，我們可以清楚地看到如何使用CSS和動畫寬度變化來為網(wǎng)頁加入一些生動的元素。希望這篇文章對讀者有所幫助，同時歡迎大家多多交流。