CSS3的強(qiáng)大功能一直令人驚嘆，其中之一就是寬窄效果。寬窄效果可以讓網(wǎng)頁上的元素在鼠標(biāo)懸浮時(shí)，實(shí)現(xiàn)寬度改變的動(dòng)畫效果，非常適合互動(dòng)型網(wǎng)頁的設(shè)計(jì)。 要實(shí)現(xiàn)寬窄效果，需要使用CSS3中的屬性-webkit-transition以及:hover偽類實(shí)現(xiàn)過渡效果。 下面是一個(gè)簡單的例子： 預(yù)覽圖如下： 當(dāng)鼠標(biāo)懸浮在黑色方塊上時(shí)，方塊的寬度會(huì)從原來的100px變成200px。這個(gè)效果在實(shí)現(xiàn)過程中非常簡單，在CSS中只需要加入如下代碼： /* 設(shè)置過渡時(shí)間為0.5秒 */ box{-webkit-transition:width 0.5s;} /* 鼠標(biāo)懸浮在box上時(shí)，將寬度變?yōu)?00px */ box:hover{width:200px;} 這個(gè)例子中，我們在樣式類.box中設(shè)置了-webkit-transition屬性，并指定其中的width屬性為0.5秒的過渡時(shí)間。接下來，在:hover偽類中，我們將box的寬度從原來的100px變成了200px。當(dāng)鼠標(biāo)懸浮在box上時(shí)，它會(huì)自動(dòng)過渡到更寬的狀態(tài)。 總的來說，寬窄效果是CSS3中非常有趣的一個(gè)功能。它能夠給互動(dòng)型網(wǎng)頁添加一些精巧的動(dòng)畫效果，讓用戶感覺到與網(wǎng)頁的互動(dòng)更加流暢和愉悅。通過上面的例子，相信大家可以輕松地理解如何使用寬窄效果，希望有機(jī)會(huì)能在自己的網(wǎng)頁中應(yīng)用到這個(gè)特性！