CSS3滤镜效果可在动画中使用

Posted 我分享我快乐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 ></div>

</body>

</html>


以上是关于CSS3滤镜效果可在动画中使用的主要内容,如果未能解决你的问题,请参考以下文章

使用强大的 CSS 滤镜实现安卓充电动画效果

css3动画效果,如何设置呢?

css3 实现动画效果,怎样使他无限循环动下去?

CSS3中动画效果Transitions与Animations的区别

css3动画使用

CSS3简单动画效果与使用列表制作菜单