canvas学习（十九）：css3 filter的十种特效

wjiaoling136

浏览: 952812 次
性别:
来自: 北京

最近访客更多访客>>

747017186

chajinglong

1017401036

温开水

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

canvas

css3 filter的十种特效

跟着慕课网上的老师学“使用canvas玩转红包”时，觉得老师讲的filter特效听酷的，就跟着老师的例子琢磨了一下，这里做个记录。

这里不讲css3的filter是什么，感兴趣的什么可以看这里。

filter的十种属性为：

grayscale：灰度，取值范围0-1(表示0%的原色到100%的灰色)，默认值1
sepia：褐色，取值范围0-1(表示0%的原色到100%的褐色)，默认值1
saturate：饱和度，默认值1
hue-rotate：色相旋转，取值范围0-360deg，默认0deg
invert：反色，取值范围0-1，默认为1
opacity：透明度，取值范围0-1（完全透明到完全不透明），默认为1
brightness：亮度，取值范围0-1（数字越小越暗，越大越亮），默认为1
contrast：对比度，默认为1
blur：模糊，数字越大越模糊，默认为0不模糊
drop-shadow：阴影

以下的例子可以切换着看各个效果：

例子的效果图：

例子的代码：

页面结构：

<body>
	<div id="left_control">
		<image id="pro_image" src="cat.jpg">
	</div>
	<div id="right_control">
		<image id="next_image" src="cat.jpg">
	</div>
	
	<div id="btn_control">
		<div id="grayscale_btn" class="color_btn color_btn_selected" onclick="modifyFilter(this,1);">grayscale</div>
		<div id="sepia_btn" class="color_btn" onclick="modifyFilter(this,1);">sepia</div>
		<div id="saturate_btn" class="color_btn" onclick="modifyFilter(this,3);">saturate</div>
		<div id="hue-rotate_btn" class="color_btn" onclick="modifyFilter(this,'180deg');">hue-rotate</div>
		<div id="invert_btn" class="color_btn" onclick="modifyFilter(this,1);">invert</div>
		<div id="opacity_btn" class="color_btn" onclick="modifyFilter(this,0.5);">opacity</div>
		<div id="brightness_btn" class="color_btn" onclick="modifyFilter(this,0.5);">brightness</div>
		<div id="contrast_btn" class="color_btn" onclick="modifyFilter(this,3);">contrast</div>
		<div id="blur_btn" class="color_btn" onclick="modifyFilter(this,'5px');">blur</div>
		<div id="drop-shadow_btn" class="color_btn" onclick="modifyFilter(this,'10px 10px 10px #aaa');">drop-shadow</div>
		<div class="clearfix"></div>
	<div>
</body>

CSS样式：

#left_control{float:left;}
#right_control{float:right;}
#btn_control{clear:both;width:1150px;margin:0 auto;}
#pro_image{margin:0px 10px 0px 20px;width:650px;height:650px;}
#next_image{margin:0px 20px 0px 10px;width:650px;height:650px;filter:grayscale(1);}

.color_btn{
	float:left;
	margin:10px 5px 0 0;
	border:5px solid white;
	width:100px;
	height:40px;
	line-height:40px;
	border-radius:10px 10px;
	cursor:pointer;
	background-color:#075A8C;
	text-align:center;
	color:white;
}

.color_btn:hover{
	border:5px solid violet;
}

.color_btn_selected{
	background-color:#CD080F;
}

.clearfix{
	clear:both;
}

JS：

function modifyFilter(obj,value){
	$(".color_btn_selected").removeClass("color_btn_selected");
	$(obj).addClass("color_btn_selected");
	var filter = $(obj).text();
	//alert(filter+"("+value+")");
	document.getElementById("next_image").style.filter=filter+"("+value+")";
}

十种特效的效果图如下：