CSS滤镜-图片模糊与清晰

最新推荐文章于 2025-03-23 10:20:15 发布

转载最新推荐文章于 2025-03-23 10:20:15 发布 · 1.6k 阅读

文章标签：

#css #filter #generator #html #javascript #function

Web前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的图片渐显效果。当鼠标悬停在图片上时，图片会逐渐变得清晰；当鼠标移开时，图片又会逐渐变得模糊。此外，还展示了如何使用CSS滤镜为页面上的文本添加发光效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
<!--
#glowtext{
filter:glow(color=red,strength=2);
width:100%;
}

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

-->
</style>
<script language="JavaScript1.2">
function CssFilter(n)
{
if(n=="add") //如果传入的参数为add，则将图片的不透明度增大
if(img.filters.alpha.Opacity < 100)
{
     img.filters.alpha.Opacity += 5;
     setTimeout("CssFilter('add')",10);
}
if(n=="dec") //如果传入的参数为dec，则将图片的不透明度降低
if(img.filters.alpha.Opacity > 20)
{
     img.filters.alpha.Opacity -= 5;
     setTimeout("CssFilter('dec')",10);
}
}
</script>
</HEAD>