纯CSS3图片滤镜效果

效果描述

之前看到一个网站,用户上传自己喜欢的图片到服务器端,服务器会有一个类似滤镜的功能
将图片渲染完毕后再返回客户端,非常好玩
今天特意整理了一个用纯CSS3实现的滤镜图片效果供给大家参考

CSS

/* 实现滤镜关键CSS样式 */
[data-filter*=image-]{flex:0 1 20%;line-height:0;position:relative;z-index:0;}
[data-filter*=image-] img{height:auto;width:100%;}
[data-filter="image-grayscale"] img{filter:grayscale(50%);}
[data-filter="image-saturate"] img{filter:saturate(360%);}
[data-filter="image-sepia"] img{filter:sepia(100%);}
[data-filter="image-invert"] img{filter:invert(100%);}
[data-filter="image-opacity"] img{filter:opacity(50%);}
[data-filter="image-brightness"] img{filter:brightness(120%);}
[data-filter="image-contrast"] img{filter:contrast(160%);}
[data-filter="image-hue-rotate"] img{filter:hue-rotate(160deg);}
[data-filter="image-blur"] img{filter:blur(2px);}


body{background:#163065;color:#fff;font-family:'Dosis',sans-serif;line-height:1;}
.xnm{display:flex;flex-wrap:wrap;}
.xnm h2{background:rgba(100,0,50,0.8);color:#fff;display:block;font-size:1.25rem;font-weight:300;left:0;line-height:1.5;margin:0;padding:.5rem;position:absolute;top:0;z-index:1;}
.xnm a{color:#fff;display:inline-block;font-size:1rem;}
.xnm a:hover{color:#f8be00;}

HTML

<!-- 代码部分begin -->
	<main class="lanren">
		<div data-filter="image-grayscale">
			<h2>grayscale</h2>
			<img src="images/a.jpg">
		</div>
		<div data-filter="image-saturate">
			<h2>saturate</h2>
			<img src="images/a.jpg">
		</div>
		<div data-filter="image-sepia">
			<h2>sepia</h2>
			<img src="images/a.jpg">
		</div>
		<div data-filter="image-invert">
			<h2>invert</h2>
			<img src="images/a.jpg">
		</div>
		<div data-filter="image-opacity">
			<h2>opacity</h2>
			<img src="images/a.jpg">
		</div>
		<div data-filter="image-brightness">
			<h2>brightness</h2>
			<img src="images/a.jpg">
		</div>
		<div data-filter="image-contrast">
			<h2>contrast</h2>
			<img src="images/a.jpg">
		</div>
		<div data-filter="image-hue-rotate">
			<h2>hue-rotate</h2>
			<img src="images/a.jpg">
		</div>
		<div data-filter="image-blur">
			<h2>blur</h2>
			<img src="images/a.jpg">
		</div>
		<div data-filter="image-normal">
			<h2>normal</h2>
			<img src="images/a.jpg">
		</div>
	</main>
	<!-- 代码部分end -->

 

RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
秀你码 » 纯CSS3图片滤镜效果

发表评论

提供最优质的资源集合

立即查看 了解详情