很多时候页面需要添加一下动效使它变得更加生动近人，让用户更愿意使用。此时，我们就可以使用css3的一些特效来实现。CSS3的过渡是指元素从一种样式逐渐改变为另一种的效果，要实现这一点，必须规定两项内容：1、规定希望把效果添加到哪个CSS属性上；2、规定效果的时长。而这个特效我们可以通过改变一些元素来完成，比如说形状、颜色、位置或者位移。我们来看一下效果：

过渡效果

他们是怎么实现的呢？代码如下：

html代码

主要还是通过css样式来实现的这些过渡效果

通过改变形状实现过渡

通过改变位移实现过渡

通过改变位置实现过渡

通过改变颜色实现过渡

为了让图片效果更加美观，我们可以在最外层添加阴影光圈，鼠标放置时显示：

阴影光圈

我们还可以通过改变图片的另一些特性来实现过渡效果，比如：

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%); 亮度。