很多时候页面需要添加一下动效使它变得更加生动近人，让用户更愿意使用。此时，我们就可以使用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%); 亮度。
网友评论