Skip to content

Instantly share code, notes, and snippets.

@mqxu
Created November 3, 2019 12:17
Show Gist options
  • Save mqxu/b42c08a05687af706d9343b4e76182fb to your computer and use it in GitHub Desktop.
Save mqxu/b42c08a05687af706d9343b4e76182fb to your computer and use it in GitHub Desktop.
【iCSS:色彩】使用filter模拟Instagram滤镜
<div class="bruce flex-ct-x">
<ul class="instagram-filter">
<li>
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Default</p>
</li>
<li class="_1977">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>1977</p>
</li>
<li class="aden">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Aden</p>
</li>
<li class="brannan">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Brannan</p>
</li>
<li class="brooklyn">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Brooklyn</p>
</li>
<li class="clarendon">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Clarendon</p>
</li>
<li class="earlybird">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Earlybird</p>
</li>
<li class="gingham">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Gingham</p>
</li>
<li class="hudson">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Hudson</p>
</li>
<li class="inkwell">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Inkwell</p>
</li>
<li class="kelvin">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Kelvin</p>
</li>
<li class="lark">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Lark</p>
</li>
<li class="lofi">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>LoFi</p>
</li>
<li class="maven">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Maven</p>
</li>
<li class="mayfair">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Mayfair</p>
</li>
<li class="moon">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Moon</p>
</li>
<li class="nashville">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Nashville</p>
</li>
<li class="perpetua">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Perpetua</p>
</li>
<li class="reyes">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Reyes</p>
</li>
<li class="rise">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Rise</p>
</li>
<li class="slumber">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Slumber</p>
</li>
<li class="stinson">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Stinson</p>
</li>
<li class="toaster">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Toaster</p>
</li>
<li class="valencia">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Valencia</p>
</li>
<li class="walden">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Walden</p>
</li>
<li class="willow">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>Willow</p>
</li>
<li class="xpro2">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>X-pro II</p>
</li>
<li class="obscure">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<p>自定义:Obscure</p>
</li>
</ul>
</div>
.instagram-filter {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
width: 1635px;
height: 630px;
li {
overflow: hidden;
position: relative;
width: 225px;
height: 150px;
}
img {
width: 100%;
height: 100%;
}
p {
position: absolute;
right: 0;
bottom: 0;
padding: 0 10px;
width: fit-content;
height: 30px;
background-color: #000;
filter: none;
line-height: 30px;
color: #fff;
}
}
.obscure {
filter: brightness(80%) grayscale(20%) contrast(1.2) opacity(.6);
}
<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />
<link href="https://una.im/CSSgram/css/cssgram.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment