css静态滤镜

更新时间：2006年07月18日 00:00:00 作者：

很无聊的把n个滤镜堆在一起就成了下面这个效果，呵呵
IE5.5+ Only

<style> #pp00 {     width:950px;     height:256px;     position:absolute;     left:10px;     top:0px;     background-color:#000060;     font-size:256px; } #pp01 {     width:0px;     height:256px;     background-color:red;     position:absolute;     left:10px;     top:0px;     filter:Alpha(style=1,opacity=30,finishOpacity=70,startY=0,finishY=256); } #pp02 {     width:960px;     height:256px;     letter-spacing:-30px;     background-color:white;     color:black;     position:absolute;     left:0px;     top:0px;     filter:Chroma(color=#000000) Glow(color=gold,strength=3) DropShadow(color=#0000F0,offX=-3,offY=-3,positive=true) Blur(Enabled=false,makeShadow=true,pixelRadius=1.0) Wave(add=false,freq=0,strength=5,lightStrength=8,phase=100);     font-size:256px;     font-weight:bold; } #pp03 {     position:absolute;     left:30px;     top:320px; } </style> <div id="pp00"> <div id="pp01"></div> <div id="pp02">诘屈聱牙</div> </div> <div id="pp03"> <input type=checkbox value="0" onpropertychange="pp02.filters[value].enabled=checked;" checked>Chorma <input type=checkbox value="1" onpropertychange="pp02.filters[value].enabled=checked;" checked>Glow <input type=checkbox value="2" onpropertychange="pp02.filters[value].enabled=checked;" checked>DropShadow <input type=checkbox value="3" onpropertychange="pp02.filters[value].enabled=checked;" >Blur <input type=checkbox value="4" onpropertychange="pp02.filters[value].enabled=checked;" checked>Wave </div> <script> function doL(){     l=pp01.offsetWidth;     l=(l>pp01.parentNode.offsetWidth-20)?0:l+2;     pp01.style.width=l; } setInterval(doL,20) </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

css静态滤镜

相关文章

css特效 - 按钮hover文字上下滑动
css特效,当鼠标悬浮按钮上方时,利用伪元素和定位来实现伪元素块上下滑入和滑出的交互效果,此效果适用于较大的按钮入口,如主页 banner 处按钮,也可以放在当作首屏当作一个大 banner 作为视觉效果等场景
2024-05-05
用CSS代码轻松Diy你的网页滚动条
用CSS代码轻松Diy你的网页滚动条...
2006-09-09
网页设计中色彩搭配的内涵
网页设计中色彩搭配的内涵...
2006-09-09
CSS定义通用透明效果
CSS定义通用透明效果...
2006-09-09
DIV+CSS 网页TIP的简单作法
DIV+CSS 网页TIP的简单作法...
2006-09-09
HTML5 WebStorage(HTML5本地存储技术)
HTML5中很重要的技能之一就是：HTML5本地存储，今天就来说说这个技术，以及和其它存储方案的比较。
2013-10-10
CSS中的滑动门技术
CSS中的滑动门技术...
2006-08-08
CSS：自定多姿多彩的网页链接下划线
CSS：自定多姿多彩的网页链接下划线...
2006-09-09
HTML DOM setInterval和clearInterval方法案例详解
这篇文章主要介绍了HTML DOM setInterval和clearInterval方法案例详解
2021-08-08
CSS透明属性详解代码
本文介绍一下关于CSS透明属性详解及背景透明继承解决办法hack，如果你在使用css透明背景之类的此文章可帮你解决许多不兼容问题
2013-11-11

最新评论