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

最新推荐文章于 2024-07-16 08:45:00 发布

丘秋_XT

最新推荐文章于 2024-07-16 08:45:00 发布

阅读量1k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/ssd21988/article/details/99701030

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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+"%)";
}