????????很多時(shí)候頁(yè)面需要添加一下動(dòng)效使它變得更加生動(dòng)近人，讓用戶更愿意使用。此時(shí)，我們就可以使用css3的一些特效來(lái)實(shí)現(xiàn)。CSS3的過(guò)渡是指元素從一種樣式逐漸改變?yōu)榱硪环N的效果，要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：1、規(guī)定希望把效果添加到哪個(gè)CSS屬性上；2、規(guī)定效果的時(shí)長(zhǎng)。而這個(gè)特效我們可以通過(guò)改變一些元素來(lái)完成，比如說(shuō)形狀、顏色、位置或者位移。我們來(lái)看一下效果：

過(guò)渡效果

他們是怎么實(shí)現(xiàn)的呢？代碼如下：

html代碼

主要還是通過(guò)css樣式來(lái)實(shí)現(xiàn)的這些過(guò)渡效果

通過(guò)改變形狀實(shí)現(xiàn)過(guò)渡

通過(guò)改變位移實(shí)現(xiàn)過(guò)渡

通過(guò)改變位置實(shí)現(xiàn)過(guò)渡

通過(guò)改變顏色實(shí)現(xiàn)過(guò)渡

為了讓圖片效果更加美觀，我們可以在最外層添加陰影光圈，鼠標(biāo)放置時(shí)顯示：

陰影光圈

我們還可以通過(guò)改變圖片的另一些特性來(lái)實(shí)現(xiàn)過(guò)渡效果，比如：

Blur：-webkit-filter: blur(4px);? 模糊度；

Sepia：-webkit-filter: sepia(100%); 褐色；

Invert：-webkit-filter: invert(0.1); 反色；

Saturate：-webkit-filter: saturate(60%); 飽和度；

brightness：-webkit-filter: brightness(60%); 亮度。