CSS3filter10种特效整理
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS3filter10种特效整理
-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="/img/tupian/pre/201509/08/caoyuanshang_wanxia-005.jpg">
<img src="/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)；关于浏览器的⽀持，在⾥可以看到，除开ie有及Opea min不⽀持以外，其它浏览器都可以良好的⽀持；但是需要注意的是，为了避免出现兼容问题，还是应该加上各⼤浏览器的私有前缀；如-webkit，-moz；上⾯这个demo，只是兼容了webkit，浏览的时候，需在chrome⾥⾯运⾏；。