css filter
浏览数：34 /
时间：2015年06月09日
1:filter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>filter</title> <style> *{ margin:0; padding:0;} a{ outline:none;} img{ width:100px;border:none; } .grayscale img{ -webkit-filter:grayscale(80%);-moz-filter: grayscale(80%);-ms-filter: grayscale(80%);-o-filter: grayscale(80%);filter: grayscale(80%);filter: gray;} .grayscale:hover img{ -webkit-filter:grayscale(0);-ms-filter: grayscale(0);-o-filter: grayscale(0);filter: grayscale(0);filter: none;} .sepia img{ -webkit-filter:sepia(80%);} .sepia:hover img{-webkit-filter:sepia(0);} .saturate img{ -webkit-filter:saturate(50%);} .saturate:hover img{-webkit-filter:saturate(0);} .saturate img{ -webkit-filter:saturate(50%);} .saturate:hover img{-webkit-filter:saturate(0);} .invert img{ -webkit-filter:invert(1);} .invert:hover img{-webkit-filter:invert(0);} .opacity img{ -webkit-filter:opacity(0.5);} .opacity:hover img{-webkit-filter:opacity(1);} .brightness img{ -webkit-filter:brightness(0.5);} .brightness:hover img{-webkit-filter:brightness(1);} .contrast img{ -webkit-filter:contrast(2);} .contrast:hover img{-webkit-filter:contrast(100%);} .blur img{ -webkit-filter:blur(3px);} .blur:hover img{-webkit-filter:blur(0px);} .drop-shadow img{ -webkit-filter:drop-shadow(5px 5px 5px #ccc);;} .drop-shadow:hover img{-webkit-filter:drop-shadow(0px);} </style> </head> <body> <h3>-webkit-filter:grayscale(80%);---all</h3> <a href="#" class="grayscale" ><img src="img/flower (3).jpg" /></a><br /> <h3>-webkit-filter:sepia(80%);褐色</h3> <a href="#" class="sepia" ><img src="img/flower (3).jpg" /></a><br /> <h3>-webkit-filter:saturate(50%);饱和度</h3> <a href="#" class="saturate" ><img src="img/flower (3).jpg" /></a><br /> <h3>-webkit-filter:hue-rotate(50deg);色相旋转</h3> <a href="#" class="hue-rotate" ><img src="img/flower (3).jpg" /></a><br /> <h3>-webkit-filter:invert(50);invert反色invert做出来的效果就像是我们照相机底面的效果一样。</h3> <a href="#" class="invert" ><img src="img/flower (3).jpg" /></a><br /> <h3>-webkit-filter:opacity(0.5);透明度</h3> <a href="#" class="opacity" ><img src="img/flower (3).jpg" /></a><br /> <h3>-webkit-filter:brightness(0.5);亮度</h3> <a href="#" class="brightness" ><img src="img/flower (3).jpg" /></a><br /> <h3>-webkit-filter:contrast(2);contrast对比度</h3> <a href="#" class="contrast" ><img src="img/flower (3).jpg" /></a><br /> <h3>-webkit-filter:drop-shadow(5px 5px 5px #ccc);drop-shadow阴影</h3> <a href="#" class="drop-shadow" ><img src="img/flower (3).jpg" /></a><br /> <h3>-webkit-filter:blur(3px);blur模糊</h3> <a href="#" class="blur" ><img src="img/flower (3).jpg" /></a><br /> </body> </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
