CSS3也能做出滤镜效果——让你的网站图片“动”起来

发布于: 2018-09-14    浏览: 1701    作者:Jian

做网站的时候想让网站代码简单点,实现的效果又要好看些?来看这里,干货分享给你们。我们做网站,有的时候就会需要动画效果,有些动画效果写JS又太麻烦,有简单的办法吗?当然是有的,其实CSS3也是可以实现动画效果的,而且现在的浏览器基本都已经支持CSS3代码的,所以用起来吧!

我这里写了一个CSS3的滤镜动画效果,代码我也分享出来给大家,有需要的话直接复制过去就可以用了。


原图如下:

CSS3也能做出滤镜效果——让你的网站图片“动”起来-长沙网站设计-长沙简界科技 


动态效果如下:

CSS3也能做出滤镜效果——让你的网站图片“动”起来-长沙网站设计-长沙简界科技 

 

代码如下:

<!doctype html>

<html>

<head>

<style>

img{display:block;}

.box{width:720px;}

.box img{width:100%;}

/*灰度效果*/

@keyframes changeGrayscale{

from{-webkit-filter:grayscale(0%);}

to{-webkit-filter:grayscale(100%);}

}

.filter_grayscale{animation:changeGrayscale 3s infinite alternate;}

/*老旧照片效果*/

@keyframes changeSepia{

from{-webkit-filter:sepia(0);}

to{-webkit-filter:sepia(1);}

}

.filter_sepia{animation:changeSepia 3s infinite alternate;}

/*饱和度效果*/

@keyframes changeSaturate{

from{-webkit-filter:saturate(100%);}

to{-webkit-filter:saturate(0%);}

}

.filter_saturate{animation:changeSaturate 3s infinite alternate;}

/*色相效果*/

@keyframes changeHue{

from{-webkit-filter:hue-rotate(180deg);}

to{-webkit-filter:hue-rotate(0deg);}

}

.filter_hue{animation:changeHue 3s infinite alternate;}

/*明度效果*/

@keyframes changeBrightness{

from{-webkit-filter:brightness(100%);}

to{-webkit-filter:brightness(300%);}

}

.filter_brightness{animation:changeBrightness 3s infinite alternate;}

/*对比度效果*/

@keyframes changeContrast{

from{-webkit-filter:contrast(100%);}

to{-webkit-filter:contrast(500%);}

}

.filter_contrast{animation:changeContrast 3s infinite alternate;}

/*反相*/

@keyframes changeInvert{

from{-webkit-filter:invert(0);}

to{-webkit-filter:invert(1);}

}

.filter_invert{animation:changeInvert 3s infinite alternate;}

/*模糊*/

@keyframes changeBlur{

from{-webkit-filter:blur(0);}

to{-webkit-filter:blur(20px);}

}

.filter_blur{animation:changeBlur 3s infinite alternate;}

/*投影*/

@keyframes changeShadow{

from{-webkit-filter:drop-shadow(0 0 0 black);}

to{-webkit-filter:drop-shadow(10px 10px 10px black);}

}

.filter_shadow{animation:changeShadow 3s infinite alternate;}

/*透明度*/

@keyframes changeOpacity{

from{-webkit-filter:opacity(1);}

to{-webkit-filter:opacity(0);}

}

.filter_opacity{animation:changeOpacity 3s infinite alternate;}

</style>

<meta charset="utf-8">

<title>CSS3滤镜效果</title>

</head>

 

<body>

<div class="box filter_grayscale"><img src="images/p1.jpg"></div>

</body>

</html>


有问题可以直接联系我们,或者在线留言都可以,看到后,我们会及时回复您的!

在线客服

售前咨询

售后服务

投诉/建议

服务热线
0731-83091505
18874148081