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

他们是怎么实现的呢?代码如下:

主要还是通过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%); 亮度。
网友评论