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

過渡效果
他們是怎么實現(xiàn)的呢?代碼如下:

html代碼
主要還是通過css樣式來實現(xiàn)的這些過渡效果

通過改變形狀實現(xiàn)過渡

通過改變位移實現(xiàn)過渡

通過改變位置實現(xiàn)過渡

通過改變顏色實現(xiàn)過渡
為了讓圖片效果更加美觀,我們可以在最外層添加陰影光圈,鼠標放置時顯示:

陰影光圈
我們還可以通過改變圖片的另一些特性來實現(xiàn)過渡效果,比如:
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%); 亮度。