做网站的时候想让网站代码简单点,实现的效果又要好看些?来看这里,干货分享给你们。我们做网站,有的时候就会需要动画效果,有些动画效果写JS又太麻烦,有简单的办法吗?当然是有的,其实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>
有问题可以直接联系我们,或者在线留言都可以,看到后,我们会及时回复您的!