CSS实现滤镜效果并动态调整

CSS实现滤镜效果

实现图片的滤镜效果只需要使用css3 的Filter 滤镜属性就能够简单完成

主要效果代码

<img src="sunflower-3292932__340.jpg" style="filter: blur(3px);"/>

<img src="sunflower-3292932__340.jpg" style="filter:grayscale(100%);"/>

<img src="sunflower-3292932__340.jpg" style="filter:sepia(100%);"/>

<img src="sunflower-3292932__340.jpg" style="filter:invert(100%);"/>

<img src="sunflower-3292932__340.jpg" style="filter: opacity(30%);"/>

<img src="sunflower-3292932__340.jpg" style="filter: saturate(800%);"/>

<img src="sunflower-3292932__340.jpg" style="filter: brightness(200%);"/>

效果图

实现动态调整

实现动态只需增加控制滤镜效果的滑块并进行监听实时更改图片的filter的属性就能够完成

HTML代码

<img src="sunflower-3292932__340.jpg" id="tiimg" style="width: 50%;"/>
<br>
<span>高斯模糊：span><input id="gaosi" type="range"  value="0"/>
<br>
<span>黑白效果：span><input id="heiba" type="range"  value="0"/>
<br>
<span>怀旧效果：span><input id="huaij" type="range"   value="0"/>
<br>
<span>反色效果：span><input id="fansx" type="range"  value="0"/>
<br>
<span>透明效果：span><input id="toum" type="range"  value="0"/>
<br>
<span>图饱和度：span><input id="baof" type="range"  value="0"/>

JS代码

var tup = document.getElementById("tiimg");
var blur=0;var hbxg=0;var hjxg=0;var fans=0;var tmxg=0;var baohd=0;
// 高斯模糊
document.getElementById("gaosi").addEventListener("input",function()
{
	blur=this.value;
	flisd();
});
//黑白效果
document.getElementById("heiba").addEventListener("input",function()
{
	hbxg=this.value;
	flisd();
});
//怀旧效果
document.getElementById("huaij").addEventListener("input",function()
{
	hjxg=this.value;
	flisd();
});
//反色效果
document.getElementById("fansx").addEventListener("input",function()
{
	fans=this.value;
	flisd();
});
//透明效果
document.getElementById("toum").addEventListener("input",function()
{
	tmxg=this.value;
	flisd();
});
//透明效果
document.getElementById("baof").addEventListener("input",function()
{
	baohd=this.value;
	flisd();
});

function flisd(){
	if(baohd==0){baohd=2;}
	tup.style.filter="blur("+blur+"px) grayscale("+hbxg+"%) sepia("+hjxg+"%)  invert("+fans+"%)  opacity("+(100-tmxg)+"%) saturate("+baohd*50+"%)";
}

实现效果‘’