CSS3 filter10种特效整理
-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。一共有10种最基本的特效,下来这个DEMO很好的展示了这些效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css3属性 filter</title>
<style>
*{padding: 0; margin: 0;}
.imgbox{width: 860px;margin: 20px auto; height: 256px;}
img{display: block; width: 410px; float: left; }
img:last-of-type{float:right;}
.box{width: 860px;margin: 0 auto; }
input[type="button"]{font-size: 14px;padding: 10px 12px;border:none;}
input[type="button"].hover,input[type="button"]:hover{background: #2BA5D3;color: #fff;}
.inner{width: 860px;text-align: center;margin: 0 auto;padding: 0 0 20px 0;font-size: 20px;font-family: 'microsoft yahei'}
</style>
<script>
window.onload=function(){
var img=document.querySelectorAll('img')[1];
var btn=document.querySelectorAll('input');
var div=document.querySelector('.inner');
img.style.WebkitFilter='grayscale(0.8)';
div.innerHTML='grayscale:灰度,值为0-1之间小数';
for(var i=0; i<btn.length;i++){
btn[i].onclick=function(){
switch(this.value) {
case 'grayscale':
img.style.WebkitFilter='grayscale(0.8)';
break;
case 'sepia':
img.style.WebkitFilter='sepia(0.8)';
break;
case 'saturate':
img.style.WebkitFilter='saturate(50)';
break;
case 'hue-rotate':
img.style.WebkitFilter='hue-rotate(90deg)';
break;
case 'invert':
img.style.WebkitFilter='invert(0.3)';
break;
case 'opacity':
img.style.WebkitFilter='opacity(0.2)';
break;
case 'brightness':
img.style.WebkitFilter='brightness(0.8)';
break;
case 'contrast':
img.style.WebkitFilter='contrast(210)';
break;
case 'blur':
img.style.WebkitFilter='blur(5px)';
break;
case 'drop-shadow':
img.style.WebkitFilter='drop-shadow(10px 10px 5px #aaa)';
break;
}
div.innerHTML=this.value+':'+this.getAttribute('data-info');
} }
}
</script>
</head>
<body>
<div class="imgbox" id="imgBox">
<img src="http://img.ivsky.com/img/tupian/pre/201509/08/caoyuanshang_wanxia-005.jpg">
<img src="http://img.ivsky.com/img/tupian/pre/201509/08/caoyuanshang_wanxia-005.jpg">
</div>
<div class="inner"></div>
<div class="box">
<input type="button" value="grayscale" data-info="灰度,值为0-1之间小数">
<input type="button" value="sepia" data-info="褐色,值为0-1之间小数">
<input type="button" value="saturate" data-info="饱和度,值为num">
<input type="button" value="hue-rotate" data-info="色相,值为0-360之间的色轮数">
<input type="button" value="invert" data-info="反色,值为0-1之间小数">
<input type="button" value="opacity" data-info="不透明度,值为0-1之间小数">
<input type="button" value="brightness" data-info="亮度,值为0-1之间小数">
<input type="button" value="contrast" data-info="对比度,值为num">
<input type="button" value="blur" data-info="模糊,值为length">
<input type="button" value="drop-shadow" data-info="阴影,同box-shadow写法">
</div> </body>
</html>
用法是标准的CSS写法,如:-webkit-filter: blur(2px);关于浏览器的支持,在caniuse.com 里可以看到,除开ie有及Opea min不支持以外,其它浏览器都可以良好的支持;但是需要注意的是,为了避免出现兼容问题,还是应该加上各大浏览器的私有前缀;如-webkit,-moz;上面这个demo,只是兼容了webkit,浏览的时候,需在chrome里面运行;
CSS3 filter10种特效整理的更多相关文章
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- jQuery+turn.js翻书、文档和杂志3种特效演示
很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 【AS3】Flash与后台数据交换四种方法整理
随着Flash Player 9的普及,AS3编程也越来越多了,所以这次重新整理AS3下几种与后台数据交换方法.1.URLLoader(URLStream)2.FlashRemoting3.XMLSo ...
- 在C#里实现各种窗口切换特效,多达13种特效
原文:http://www.cnblogs.com/clayui/archive/2011/06/28/2092126.html 预览: 下载 这次clayui给大家带来了比较实用的东西,因为时间 ...
- 可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
- 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码
[实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...
- CSS3火焰文字特效制作教程
原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
- CSS3实现烟花特效 --web前端
烟花特效,比较简单,直接贴代码了…… <!DOCTYPE html><html lang="en"><head> <meta charse ...
随机推荐
- ASP.NET MVC SignalR
本系列博文主要介绍了 ASP.NET SignalR 的相关知识与开发,参考来源为<ASP.NET SignalR 编程实践>. 目录: SignalR背景 SignalR概述
- ChainOfResponsibility
#include <iostream> using namespace std; class Chain { public: bool Handle() { return false; } ...
- jquery 仿手机屏幕切换界面效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 单个input框上传多个文件操作
HTML页面: <div class="form-group thumb"> <label class="control-label col-xs-12 ...
- 【php学习之路】php基础语法
一.什么是php? PHP即PHP: Hypertext Preprocessor(超文本处理器),是一种服务器端脚本语言,适用于创建web站点.开源免费 二.php能做什么? ...
- 复习URLHttpConnection方式GET,POST方式链接网络解析uri
xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- AMD平台下在Windows虚拟机中安装Mac10.8.6【Written By KillerLegend】
我的电脑CPU是AMD,以前在虚拟机中装过Windows操作系统,感觉很简单,这几天想体验一下苹果系统,未来也可能会从事Mac相关软件开发,于是从早上便兴致勃勃的开始了--于是悲剧也开始了,上网各种查 ...
- MongoDB分片简单实例
分片 在Mongodb里面存在另一种集群,就是分片技术,可以满足MongoDB数据量大量增长的需求. 当MongoDB存储海量的数据时,一台机器可能不足以存储数据也足以提供可接受的读写吞吐量.这时,我 ...
- C# 堆和栈的区别-该文转自:http://www.itcodes.cn/746.html | 程序人生
理解堆与栈对于理解.NET中的内存管理.垃圾回收.错误和异常.调试与日志有很大的帮助.垃圾回收的机制使程序员从复杂的内存管理中解脱出来,虽然绝大多数的C#程序并不需要程序员手动管理内存,但这并不代表程 ...
- win10里安装.net3.5
在CMD窗口里面输入这样一段,来安装Microsoft.MET Framework 3.5 Dism /online /enable-feature /featurename:NetFX3 /All ...