<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <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> </head> <body> <div class="l"> <h3>图片滤镜特效试验</h3> <img id="fxPhoto" src="http://avatar.csdn.net/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.csdn.net/A/7/9/1_damys.jpg" /> </div> <script type="text/javascript"> var photo = document.querySelector("#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 = ""; filters.forEach(function(n,i) { var value = document.querySelector('#'+n.name).value; // Update the value title document.querySelector('#title_'+n.name).innerHTML = "<h3>" + n.cname + "(" + n.name + ":" +value + n.unit + ")</h3>"; // Update CSS string cssString += " " + n.name + "(" + value + n.unit + ")"; }); photo.style["-webkit-filter" ]= cssString; } HTMLElement.prototype.appendHTML = function(html) { var divTemp = document.createElement("div"), nodes = null // 文档片段,一次性append,提高性能 , fragment = document.createDocumentFragment(); divTemp.innerHTML = html; nodes = divTemp.childNodes; for (var i=0, length=nodes.length; i<length; i+=1) { fragment.appendChild(nodes[i].cloneNode(true)); } this.appendChild(fragment); // 据说下面这样子世界会更清净 nodes = null; fragment = null; }; // For every filter var container = document.querySelector("#sliderContainer"); filters.forEach(function(n) { container.appendHTML("<p id='title_"+n.name+"'>"+n.cname+"</p>"); container.appendHTML("<input onChange='onChange()' value='"+n.def+"' type='range' id='"+n.name+"' min='"+n.min+"' max='"+n.max+"' step='"+n.step+"'>"); }); onChange(); </script> </body> </html>
相关推荐
android 视频滤镜处理demo程序,通过对视频进行滤镜处理,实现滤镜效果,并保存
本人实现了微软自拍中所有滤镜效果,几乎一模一样,DEMO给大家分享一下!
HTML5+CSS实现的一款仿Instagram应用图片滤镜效果,HTML5图片滤镜特效。
android 图像滤镜处理 有十多种效果 Demo
一个ios的入门demo,利用开源库GPUImage做成的简单的几种滤镜
本人分享一个完整的C#磨皮滤镜代码DEMO,效果很赞,磨皮的同时,保留了一定的细节,跟大家分享一下!
主要介绍了如何使用css达到滤镜的效果,其中包含了各种滤镜,通过相关的滤镜函数达到不同的效果。
HTML5 CSS仿Instagram应用图片滤镜效果
Qt+opengl实现多种滤镜效果Qt+opengl实现多种滤镜效果Qt+opengl实现多种滤镜效果Qt+opengl实现多种滤镜效果Qt+opengl实现多种滤镜效果Qt+opengl实现多种滤镜效果Qt+opengl实现多种滤镜效果Qt+opengl实现多种滤镜效果...
<link rel="stylesheet" type="text/css" href="css/default.css?3.1.64"> <link rel="stylesheet" href="css/demo-site.min.css?... 这是一份CSS H5仿Instagram应用图片滤镜效果,需要的朋友可以下载使用
因为该demo是通过记录着拖动后松手的坐标,具体话语不多说,大家下来看看就知道,绝不为赚分而欺骗大家,实实在在的通过自己花心思写的demo,如果在某些手机上导致一些问题,欢迎大家指出,我会第一时间去测试,并...
该DEMO实现了微软自拍APP中所有的滤镜,效果几乎一模一样,跟大家分享一下!
简单的滤镜合成demo.zipIOS应用例子源码下载简单的滤镜合成demo.zipIOS应用例子源码下载 1.适合学生学习研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
这是一款基于HTML5和CSS3的图片滤镜特效应用,每一张图片应用不同的滤镜效果都会有不一样的视觉特效。另外,你也可以切换图片,特别是应用在相册应用中,你不仅可以浏览不同的图片,而且对同一张图片可以有多种特效...
关于IE滤镜效果的一般演示,初级滤镜的学习操作,结合了HTML和Javascript,javascript 滤镜 脚本 HTML。
花纹滤镜效果HTML5模板是一款粉色大气风格的HTML5网站模板下载。
Unity摄像头画面30种滤镜效果
实现相机滤镜效果,打开相册选择照片,进行滤镜展示,包括 原始" "lomo", "黑白", "怀旧", "哥特", "淡雅", 酒红", "清宁", "浪漫", "光晕", "蓝调", "梦幻", "夜色"等滤镜效果。。
前两年IOS应用源码-主要是用于毕业设计学习的。
html5上传图片编辑滤镜调色效果 html5上传图片编辑滤镜调色效果