HTML5----CSS3图片滤镜(filter)特效
支持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)特效的更多相关文章
- 基于HTML5/CSS3图片网格动画特效
现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...
- css3图片模糊过滤特效
体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 精选 5 个漂亮的 CSS3 图片滑过特效
这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...
- CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...
- 9款超绚丽的HTML5/CSS3应用和动画特效
1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...
- 基于CSS3图片悬停放大特效
今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果.配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的 ...
- html5+css3图片旋转特效
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- css3图片滤镜
http://www.zhanxin.info/development/2012-12-19-css-filter.html
- HTML5/CSS3图片左右切换弹性动画
在线演示 本地下载
随机推荐
- 5-Java-C(调和级数)
题目描述: 1/1 + 1/2 + 1/3 + 1/4 + ... 在数学上称为调和级数. 它是发散的,也就是说,只要加上足够多的项,就可以得到任意大的数字. 但是,它发散的很慢: 前1项和达到 1. ...
- wireshark mqtt协议解析
local tcp_dissector_table = DissectorTable.get("tcp.port") local ws_dissector_table = Diss ...
- JSP的九大对象和四大作用域
1.JSP中九大内置对象为: request 请求对象 类型 javax.servlet.ServletRequest 作用域 Request ...
- redis的安装总结
1. 下载redis安装包:> 可以用命令: wget http://download.redis.io/releases/redis-5.0.5.tar.gz, 或者直接从官网下载.2. 解压 ...
- idea关闭,tomcat却没关闭的设置方法
最近,遇到个事,我在打开tomcat时,关闭了idea,再次打开时,运行tomcat时,发现端口占用,查看任务管理器,发现,tomcat没有随idea的关闭而关闭. 后来,想想,可能是,在关闭时,点了 ...
- DHCP和PXE
继续学习,Let's go!DHCP和PXE都是什么呢?如果非科班出身,可能一脸懵逼,好多东西需要去学习了,真的,继续学吧,付出不一定会有回报,不付出肯定就是等死了,呵呵! 一.DHCP 真正需要手动 ...
- P1759 通天之潜水(不详细,勿看)(动态规划递推,组合背包,洛谷)
题目链接:点击进入 题目分析: 简单的组合背包模板题,但是递推的同时要刷新这种情况使用了哪些物品 ac代码: #include<bits/stdc++.h> using namespace ...
- leetcode-88合并两个有序数组
合并两个有序数组 思路:利用索引合并两个列表,排序.注意不需要返回值,只修改nums1 class Solution: def merge(self, nums1: List[int], m: int ...
- Python之使用eval()函数将字符串的数据结构提取出来
data = input('请输入你要修改的对象:').strip() ''' 输入下面的字典列表 [{'backend':'www.oldboy1.org','record':{'server':' ...
- 84-Market Facilitation Index 市场促进指数指标.(2015.7.3)
Market Facilitation Index 市场促进指数指标 MFI指标的计算方式为: MFI=High(最高价)-Low(最低价))/ Volume(成交量) MFI上升,成交量上升,表示价 ...