HTML5----CSS3图片滤镜(filter)特效
来源:互联网 发布:网络安全检查台帐 编辑:程序博客网 时间:2024/05/02 06:13
支持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.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>
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 eventfunction onChange() {var cssString = "";jQuery.each(filters, function() {var value = jQuery('#'+this.name).val();// Update the value titlejQuery('#title_'+this.name).html("<h3>" + this.cname + "(" + this.name + ":" +value + this.unit + ")</h3>");// Update CSS stringcssString += " " + this.name + "(" + value + this.unit + ")";});photo.attr('style', "-webkit-filter: " + cssString);}// For every filtervar 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>
0 0
- HTML5----CSS3图片滤镜(filter)特效
- css3中的滤镜特效
- css3 filter滤镜
- css3-filter滤镜总纲
- CSS3 filter(滤镜) 使用
- CSS3 filter(滤镜用法)
- CSS3 filter(滤镜) 属性
- CSS3 filter(滤镜)
- 【CSS3】滤镜+【html5】画布实现图片模糊效果
- CSS3 Filter特效详解
- CSS3 -webkit-filter 滤镜效果
- CSS3 -webkit-filter 滤镜效果
- CSS3 -webkit-filter 滤镜效果
- CSS3 filter 实现滤镜效果
- CSS3 图片滤镜
- css3图片滤镜
- HTML5/CSS3特效
- css3 html5动画特效
- bochs简介
- java 重写equals和hashcode
- 80x86系统启动原理
- 汇编和C相互调用
- 声波通信支付宝、超声波、蛐蛐儿等定制版本源代码
- HTML5----CSS3图片滤镜(filter)特效
- 2003年中国足球甲A联赛排名规则&阿姆达尔定律&人月传说
- 【转】一致代码段和非一致代码段
- bochs启动报错:Message: ROM: System BIOS must end at 0xfffff
- 80x86保护模式
- undefined reference to `__stack_chk_fail'
- hdu 3952
- 汇编指令集合
- SMART原则