支持Chrome:

暂不支持浏览器:FF,IE...

希望后者努力

效果图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFteXM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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 event
function onChange() {
var cssString = ""; jQuery.each(filters, function() {
var value = jQuery('#'+this.name).val();
// Update the value title
jQuery('#title_'+this.name).html("<h3>" + this.cname + "(" + this.name + ":" +value + this.unit + ")</h3>"); // Update CSS string
cssString += " " + this.name + "(" + value + this.unit + ")";
});
photo.attr('style', "-webkit-filter: " + cssString);
} // For every filter
var 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>

HTML5----CSS3图片滤镜(filter)特效的更多相关文章

  1. 基于HTML5/CSS3图片网格动画特效

    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...

  2. css3图片模糊过滤特效

    体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. 精选 5 个漂亮的 CSS3 图片滑过特效

    这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...

  4. CSS3的滤镜filter属性

    css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...

  5. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  6. 基于CSS3图片悬停放大特效

    今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果.配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的 ...

  7. html5+css3图片旋转特效

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  8. css3图片滤镜

    http://www.zhanxin.info/development/2012-12-19-css-filter.html

  9. HTML5/CSS3图片左右切换弹性动画

    在线演示 本地下载

随机推荐

  1. loadrunner 响应时间和TPS

    例子:一个高速路有10个入口,每个入口每秒钟只能进1辆车 1.请问1秒钟最多能进几辆车?    TPS=10 2.每辆车需要多长时间进行响应?    reponse time = 1 3.改成20辆车 ...

  2. CAD交互绘制圆弧(com接口)

    在CAD设计时,需要绘制圆弧,用户可以在图面点圆弧起点,圆弧上的一点和圆弧的终点,这样就绘制出圆弧. 主要用到函数说明: _DMxDrawX::DrawArc2 由圆弧上的三点绘制一个圆弧.详细说明如 ...

  3. C 语言指针 5 分钟教程

    指针.引用和取值 什么是指针?什么是内存地址?什么叫做指针的取值?指针是一个存储计算机内存地址的变量.在这份教程里“引用”表示计算机内存地址.从指针指向的内存读取数据称作指针的取值.指针可以指向某些具 ...

  4. Leetcode 54:Spiral Matrix 螺旋矩阵

    54:Spiral Matrix 螺旋矩阵 Given a matrix of m x n elements (m rows, n columns), return all elements of t ...

  5. 第2节 mapreduce深入学习:16、17、map端的join算法的实现

    map端的join算法,适用于小表join大表的时候,一次性把小表的数据全部装载到内存当中来: 代码: MapJoinMain: package cn.itcast.demo5.mapJoin; im ...

  6. [Algorithm] 2. Trailing Zeros

    Description Write an algorithm which computes the number of trailing zeros in n factorial. Example 1 ...

  7. IO之Print流举例

    import java.io.*; public class TestPrintStream1 { public static void main(String[] args) { PrintStre ...

  8. 零基础入门学习Python(4)--改进我们的小游戏

    前言 在以前的博客中有做个一个小游戏,但是太简单了,所以这次就来对我们做的小游戏进行改进,改善从以下四个方面进行: 程序猜错的时候要给出提示,例如告诉用户输入的值是大了还是小了. 以前程序每运行一次只 ...

  9. Go:冒泡排序

    package main import "fmt" func BubbleSort(arr *[5]int) { fmt.Println("排序前:", *ar ...

  10. Buffer.from(arrayBuffer[, byteOffset[, length]])

    Buffer.from(arrayBuffer[, byteOffset[, length]]) arrayBuffer - 一个 TypedArray 或 new ArrayBuffer() 的 . ...