loading...

0

CSS3 Filter的十种特效

css读完大概需要7分钟

  • 发布时间:2017-10-23 22:29 星期一
  • 刘伟波
  • 261
  • 更新于2017-10-23 22:29 星期一




<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>CSS Filter Effects In Action</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

ul {

width: 690px;

margin: 20px auto;

letter-spacing: -4px;

word-spacing: -4px;

font-size: 0;

}

li {

font-size: 16px;

letter-spacing: normal;

word-spacing: normal;

display:inline-block;

*display: inline;

zoom:1;

list-style: none outside none;

margin: 5px;

}

img {

width: 128px;

height: 128px;

}

.gallery li:nth-child(2){

-webkit-filter:grayscale(1);

}

.gallery li:nth-child(3){

-webkit-filter:sepia(1);

}

.gallery li:nth-child(4){

-webkit-filter:saturate(0.5);

}

.gallery li:nth-child(5){

-webkit-filter:hue-rotate(90deg);

}

.gallery li:nth-child(6){

-webkit-filter:invert(1);

}

.gallery li:nth-child(7){

-webkit-filter:opacity(0.2);

}

.gallery li:nth-child(8){

-webkit-filter:blur(3px);

}

.gallery li:nth-child(9){

-webkit-filter:drop-shadow(5px 5px 5px #ccc);

}

.gallery li:nth-child(10){

 -webkit-filter: saturate(6) hue-rotate(361deg) brightness(.09);

}

.gallery:hover li:not(:hover){

 -webkit-filter: blur(2px) grayscale(1);

opacity: .7; 

}

</style>

</head>

<body>

 <ul class="gallery">

    <li>

<img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

    </li>

    <li>

<img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

</li>

    <li>

       <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

    </li>

    <li>

       <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

    </li>

    <li>

       <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

    </li>

    <li>

       <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

    </li>

    <li>

       <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

    </li>

    <li>

       <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

    </li>

    <li>

       <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

    </li>

    <li>

       <img alt="" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />

    </li>    

  </ul>​

</body>

</html>


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 segmentfault平台, 也可以来我的直播间来提问。
    关于技术问题或者有啥不懂的都可以留言, 我会定期回复答疑, 也可以来 我的直播间 提问, 推荐最新仓库 前端知识体系, 感謝支持!