CSS3滤镜效果可在动画中使用
<!doctype html>
<html>
<head>
<style>
img{display:block;}
.box{width:600px;}
.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>无标题文档</title>
</head>
<body>
<div class="box filter_grayscale"><img src="images/photo.jpg"></div>
</body>
</html>