canvas学习(十九):css3 filter的十种特效
程序员文章站
2022-06-23 17:27:39
...
跟着慕课网上的老师学“使用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+")"; }
十种特效的效果图如下:
最后,感谢老师的分享!
上一篇: 验证码
下一篇: SpringMVC系列目录