HTML5----CSS3图片滤镜(filter)特效

支持Chrome:

暂不支持浏览器：FF,IE...

希望后者努力

效果图：

CSS:

<style type="text/css">
@-webkit-keyframes testAnim {
			0% {-webkit-filter: grayscale(0.5) blur(1px) saturate(2);}
			100% {-webkit-filter: grayscale(0.2) blur(6px) saturate(9);}
}

/*IE,FF暂不支持*/
@-moz-keyframes testAnim {
			0% {-moz-filter: grayscale(0.5) blur(1px) saturate(2);}
			100% {-moz-filter: grayscale(0.2) blur(6px) saturate(9);}
}

@-ms-keyframes testAnim {
			0% {-ms-filter: grayscale(0.5) blur(1px) saturate(2);}
			100% {-ms-filter: grayscale(0.2) blur(6px) saturate(9);	}
}

@keyframes testAnim {
			0% {filter: grayscale(0.5) blur(1px) saturate(2);}
			100% {filter: grayscale(0.2) blur(6px) saturate(9);}
}
		
		#animatePhoto {}		
		.animatePhoto:hover,#animatePhoto:hover{
			 -webkit-animation-name: testAnim;
			 -webkit-animation-duration: 2s;
			 -webkit-animation-iteration-count: 1;
			 -webkit-animation-direction: alternate;
			 -webkit-animation-timing-function: ease-out;
			 -webkit-animation-fill-mode: forwards;
			 -webkit-animation-delay: 0s;

/*IE,FF暂不支持*/
			 -moz-animation-name: testAnim;
			 -moz-animation-duration: 2s;
			 -moz-animation-iteration-count: 1;
			 -moz-animation-direction: alternate;
			 -moz-animation-timing-function: ease-out;
			 -moz-animation-fill-mode: forwards;
			 -moz-animation-delay: 0s;

			 -ms-animation-name: testAnim;
			 -ms-animation-duration: 2s;
			 -ms-animation-iteration-count: 1;
			 -ms-animation-direction: alternate;
			 -ms-animation-timing-function: ease-out;
			 -ms-animation-fill-mode: forwards;
			 -ms-animation-delay: 0s;

			 animation-name: testAnim;
			 animation-duration: 2s;
			 animation-iteration-count: 1;
			 animation-direction: alternate;
			 animation-timing-function: ease-out;
			 animation-fill-mode: forwards;
			 animation-delay: 0s;
		}
.l,.r{ width:40%; float:left; padding:40px;}
</style>

HTML：

<div class="l">
    <h3>图片滤镜特效试验</h3>
    <img id="fxPhoto" src="http://avatar.youkuaiyun.com/A/7/9/1_damys.jpg" />
    <div id="sliderContainer"></div>
</div>

<div class="r">
    <h3>图片滤镜特效试验：hover</h3>
    <img id="animatePhoto" class="animatePhoto" src="http://avatar.youkuaiyun.com/A/7/9/1_damys.jpg" />
</div>

JS:拖动效果

<script type="text/javascript">					
			var photo = jQuery("#fxPhoto");
			var filters = [
				{ name: "grayscale", cname: "黑白照片(灰度级)效果", def: "0", unit: "", min:0 , max:1.0, step: "0.01" },
				{ name: "blur", cname: "模糊效果", def: "0", unit: "px", min: 0, max: 10 , step: "1"},
				{ name: "sepia", cname: "老照片(褐黄色)效果", def: "0", unit: "", min: 0, max: 1.0 , step: "0.01"},
				{ name: "saturate", cname: "饱和度调整", def: "1", unit: "", min: 0, max: 1.0 , step: "0.01"},
				{ name: "opacity", cname: "透明度调整", def: "1", unit: "", min: 0, max: 1.0 , step: "0.01"},
				{ name: "brightness", cname: "亮度调整", def: "1", unit: "", min: 0, max: 1.0 , step: "0.01"},
				{ name: "contrast", cname: "对比度调整", def: "1", unit: "", min: 0, max: 1 , step: "0.01"},
				{ name: "hue-rotate", cname: "色调调整", def: "0", unit: "deg", min: 0, max: 360 , step: "1"},
				{ name: "invert", cname: "色彩反相", def: "0", unit: "", min: 0, max: 1.0 , step: "0.01"}
			];
			
			// Change event
			function onChange() {
				var cssString = "";
								
				jQuery.each(filters, function() {
					var value = jQuery('#'+this.name).val();					
					// Update the value title
					jQuery('#title_'+this.name).html("<h3>" + this.cname + "(" + this.name + ":" +value + this.unit + ")</h3>");
					
					// Update CSS string
					cssString += " " + this.name + "(" + value + this.unit + ")";
				});				
				photo.attr('style', "-webkit-filter: " + cssString);
			}
			
			// For every filter
			var container = jQuery("#sliderContainer");
			jQuery.each(filters, function() {
				container.append("<p id='title_"+this.name+"'>"+this.cname+"</p>");
				container.append("<input onChange='onChange()' value='"+this.def+"' type='range' id='"+this.name+"' min='"+this.min+"' max='"+this.max+"' step='"+this.step+"'>");
			});

			onChange();				
</script>