很多时候页面需要添加一下动效使它变得更加生动近人,让用户更愿意使用。此时,我们就可以使用css3的一些特效来实现。CSS3的过渡是指元素从一种样式逐渐改变为另一种的效果,要实现这一点,必须规定两项内容:1、规定希望把效果添加到哪个CSS属性上;2、规定效果的时长。而这个特效我们可以通过改变一些元素来完成,比如说形状、颜色、位置或者位移。我们来看一下效果:
![](https://img.haomeiwen.com/i8435032/4b2bd591b1d5b156.gif)
他们是怎么实现的呢?代码如下:
![](https://img.haomeiwen.com/i8435032/58355001defd933f.png)
主要还是通过css样式来实现的这些过渡效果
![](https://img.haomeiwen.com/i8435032/87a10ac58811968f.png)
![](https://img.haomeiwen.com/i8435032/4f45db85db0570ac.png)
![](https://img.haomeiwen.com/i8435032/8e2474f71f136501.png)
![](https://img.haomeiwen.com/i8435032/684672bd33203b88.png)
为了让图片效果更加美观,我们可以在最外层添加阴影光圈,鼠标放置时显示:
![](https://img.haomeiwen.com/i8435032/a3dd6ea8e3fe3b3b.png)
我们还可以通过改变图片的另一些特性来实现过渡效果,比如:
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%); 亮度。
网友评论