`

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+")";
}

十种特效的效果图如下:

 



 

 

 
最后,感谢老师的分享!

  • 大小: 180.2 KB
  • 大小: 92.9 KB
  • 大小: 116.3 KB
  • 大小: 79.2 KB
  • 大小: 95 KB
  • 大小: 103.4 KB
分享到:
评论

相关推荐

    html5 canvas多层波浪背景动画特效

    当用户按下鼠标时,可以捕获鼠标的位置和按键状态,然后根据这些信息调整波浪的颜色属性,例如使用`fillStyle`设置填充色,或者通过CSS3的`filter`属性调整饱和度。 CSS3在这里的作用主要在于样式控制和动画辅助。...

    Jquery Html5 Css几十种文字特效收集

    本资源集合了"Jquery Html5 Css几十种文字特效收集",旨在为开发者提供丰富的灵感和工具,以实现超酷、超炫、稳重的文字效果。下面,我们将详细探讨这些标签所涵盖的技术和知识点。 首先,`文字特效`是前端开发中的...

    CSS3 Filter图片滤镜特效.zip

    本资源"CSS3 Filter图片滤镜特效.zip"包含了一系列示例,帮助我们理解和应用这些滤镜效果。以下是对CSS3滤镜特效及其相关技术的详细解释。 首先,CSS3滤镜是通过`filter`属性实现的,它可以改变元素的外观,包括...

    HTML5 Canvas实现3D旋转物体动画及模糊发光特效源码

    在这个项目中,我们看到HTML5 Canvas被用来创建一个3D旋转物体的动画,同时结合CSS3的技术,实现了物体的模糊发光特效。 首先,让我们深入了解一下HTML5 Canvas的基本概念。Canvas是一个基于矢量图形的画布,通过...

    纯CSS3炫酷3D星空动画特效

    【标题】"纯CSS3炫酷3D星空动画特效"涉及了现代网页设计中的关键技能——CSS3的应用,特别是其在实现3D效果和动画功能上的潜力。CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,极大地扩展了对网页样式...

    CSS3滤镜及Canvas.docx

    CSS3滤镜是CSS3中引入的一种增强网页视觉效果的特性,允许开发者对网页中的图像应用各种特效,如模糊、灰度、饱和度调整等。CSS3滤镜主要由Webkit内核的浏览器(如Chrome和Safari)首先支持,随后Firefox和IE10+也...

    云雾状粒子旋转Canvas特效.zip

    CSS3的过渡(transition)、动画(animation)或者滤镜(filter)也可能被用来增强整体视觉体验。 5. **网页特效**: - 这个特效是网页交互的一部分,可能作为网站背景或者特定交互的反馈。良好的网页特效可以提升...

    canvas实现模糊效果

    在本主题中,我们将深入探讨如何使用CSS3和Canvas来实现图片的模糊效果,特别是在Canvas上进行交互设计时如何应用模糊特效。 首先,CSS3已经提供了`filter`属性来实现元素的模糊效果。通过`filter: blur(x)`,我们...

    JS+CSS3模糊图像去雾变清晰特效.rar

    【标题】"JS+CSS3模糊图像去雾变清晰特效.rar"所涉及的知识点主要集中在JavaScript(JS)和CSS3这两个前端技术上,用于实现一种图像处理特效——将原本模糊或有雾效果的图像转化为清晰状态。这个特效在网页设计中...

    html5+canvas仿抖音直播爱心飘动点赞动画特效源码.zip

    8. **CSS3动画**:除了Canvas,CSS3也提供了动画功能,如关键帧动画(`@keyframes`),可能与Canvas结合使用,为爱心点赞特效增添更多维度的动态效果。 综上所述,这个压缩包中的源码涉及了HTML5 Canvas的高级应用,...

    透明线条游动Canvas特效.zip

    比如,可以通过CSS3的`animation`属性创建与Canvas动画相协调的视觉效果,或者使用`filter`属性调整Canvas元素的透明度,使得整体效果更和谐。 在压缩包中的文件"jiaoben7088"可能是一个示例代码文件,包含实现这个...

    HTML5和CSS3炫酷图片运动模糊和倾斜特效

    CSS3的`filter`属性也可能被用来实现运动模糊效果,它可以应用各种图像处理滤镜,如模糊、灰度等。 在压缩包中,`index.html`是主页面文件,包含整个特效的HTML结构和链接到其他资源的引用;`readme.html`可能包含...

    CSS3实现立体文字动态文字特效

    标题中的“CSS3实现立体文字动态文字特效”指的是利用CSS3的新特性来创建具有三维立体感和动态效果的文字。在CSS3中,我们可以通过一系列的样式规则来改变文本的外观,使其看起来像浮出页面或者有深度感。这些效果...

    html5 canvas烟雾消散图片切换动画特效

    在这个“html5 canvas烟雾消散图片切换动画特效”中,我们看到的是利用Canvas元素来实现的一种视觉效果,它通过烟雾消散的动画过渡,巧妙地在两张图片之间进行切换。 首先,我们要理解Canvas的基本使用。在HTML中,...

    HTML5 Canvas模糊圆点粒子背景动画特效

    在这个“HTML5 Canvas模糊圆点粒子背景动画特效”中,我们主要探讨的是如何利用Canvas API来创建一种柔和且具有视觉吸引力的背景效果。 首先,让我们了解一下Canvas的基本概念。HTML5 Canvas是一个基于矢量图形的...

    模糊烟雾背景Canvas特效.zip

    例如,使用CSS3的滤镜(`filter`属性)可以进一步增强烟雾的模糊感,或者通过`backdrop-filter`属性为Canvas背景应用模糊效果。此外,CSS的定位(positioning)和过渡(transitions)也可能被用来增强用户的交互体验...

    Canvas烟花粒子上升特效.zip

    CSS特效则通常涉及CSS3的新特性,如过渡(transition)、动画(animation)和滤镜(filter),用于改变元素的样式和行为,但在这个特定的案例中,由于主要依赖Canvas,CSS特效可能相对较少,更多的是通过JavaScript...

    three.js Canvas css3飞机飞行场景动画特效.zip

    &lt;div class="gallery-header-center-right-links" id="filter-all"&gt;All &lt;div class="gallery-header-center-right-links" id="filter-studio"&gt;Studio &lt;div class="gallery-header-center-right-links" id="filter-...

    利用canvas 画布制作逼真的水滴特效.docx

    使用 Canvas 画布制作逼真的水滴特效 本文将通过使用 Canvas 画布来制作逼真的水滴特效,并探讨相关的技术和实现方法。 Canvas 画布简介 ---------------- Canvas 画布是 HTML5 中的一个元素,用于创建图形和...

Global site tag (gtag.js) - Google Analytics