css静态滤镜

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

#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;
}

诘屈聱牙

Chorma
Glow
DropShadow
Blur
Wave

function doL(){
l=pp01.offsetWidth;
l=(l>pp01.parentNode.offsetWidth-20)?0:l+2;
pp01.style.width=l;
}

setInterval(doL,20)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • css静态滤镜 + A:Hover

    css静态滤镜 + A:Hover 的效果 WU XIN * { margin:0px; padding:0px; } .i1 { width:64px; border:0px none #888; margin:0px; } .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } .a0:hover, .a0:active { filter:Alpha(Opacity=100); disp

  • css静态滤镜

    很无聊的把n个滤镜堆在一起就成了下面这个效果,呵呵 IE5.5+ Only #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;

  • css静态滤镜 + A:Hover 效果第1/3页

    IE Only Step1: WU XIN * { margin:0px; padding:0px; } .i1 { width:64px; border:0px none #888; margin:0px; } .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } .a0:hover, .a0:active { filter:Alpha(Opacity=100); display:blo

  • CSS滤镜示范(filter)附源代码(静态滤镜)

    filter(css滤镜) body { margin: 0px; padding: 0px; } table { font-size: 12px; border: 1px solid #0000FF; } tr,td { padding: 0px; border: 1px solid #0000FF; } filter视觉滤镜的种类 Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) DropShadow(不透明阴影) FlipH&FlipV(翻转) Glow(边缘光晕) G

  • 用css alpha 滤镜 实现input file 样式美化代码

    在WEB上传文件时,要用到上传框:  <input type="file" id="f" name="f">         这东东在IE(其他偶没经过测试)中是一个非常特殊的对象. 如果是您手动写入的或其他对象经过某些事件触发填入的值 ,由于安全问题,在进行提交表单时,往往会被清空,所以上传失败. 简单点说,除非你的鼠标亲自点到了上传框f上,IE才会给你上传文件! 哪怕你将 f 的onclick句柄赋给某个对象,如:  <in

  • 用html css javascript打造自己的RIA图文教程第1/2页

    在制作之前,先建立开发环境.打开netbeans6.1,在项目工作区,右击新建项目,选择Web目录下的Web应用程序. 项目名称输入 RIADemo . 选择运行的服务器以及 java ee 标准. 在这里选择tomcat5.0,j2ee1.4,本文介绍例子,并不依赖于服务器,因为html&css&javascript本身都是静态的,做完以后就是一个html文件.严格意义上的web程序肯定是要有一个服务器来运行的,netbeans还是采用了这种管理理念.在这一步,已经可以点击完成建立项目,

  • CSS实现阴影文字效果

    ..:: 巧用CSS制作艺术字 ::.. 如果灵活应用CSS各种滤镜的特点并加以组合,我们可以得到许多意想不到的效果.这是一些效果示范,供各位参考. E流设计 用blur滤镜做出的效果,代码如下: FILTER: blur(direction=135,strength=8) E流设计 用dropshadow滤镜做出的效果,代码如下: FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1) E流设计 用glow滤镜做出的效果,代码如下:

  • Tomcat中对静态资源的处理教程

    前言 Tomcat 中的请求都是由 Servlet 处理,静态资源也不例外.在默认的 web.xml 中,配置了一个 DefaultServlet 用于处理静态资源,它支持缓存和断点续传. DefaultServlet 的基本处理过程如下: 查找资源是否存在缓存 检查是否满足可选 If 头域指定的条件 设置响应头域,如 Content-Type.Content-Length.ETag.Last-Modified 检查是否满足 Sendfile 的条件,否则将内容拷贝到输出流中 接下来主要分析资源

  • 浅谈CSS不规则边框的生成方案

    需求背景,给不规则图形添加边框 在我们日常开发中,时长会遇到一些非矩形.非圆形的图案.类似下面这些: 使用纯 CSS,搭配一些技巧,是可以制作出上面的图形的,当然这只是需求的第一步. 紧接着,可能会有要给上述图形添加边框的诉求,这个时候,CSS 就很难办到了. 尝试使用 drop-shadow 添加边框 第一种方法,我们可以尝试使用 drop-shadow,给不规则的图形,添加一个外阴影. 我们以一个箭头图形为例使用 CSS 简单实现它的其中一种方式如下: <div class="arro

  • jQuery实现腾讯信用界面(自制刻度尺)样式

    依据我现有的知识,在前端上"简易"的实现了腾讯信用的界面,同时自己自制了一个竖直的刻度尺插件,曲线的位置可以根据传入的数值动态的改变,这次主要也想总结一下关于jQuery中extend的方法,也是我们在写插件的时候常用的方法 效果图 jQuery中的extend方法 这里我参考了前辈的博客,在前辈博客中可以进行更深一步的学习: 文档中给的解释是:jQuery.extend()函数主要是用于将一个或多个对象的内容合并到目标对象上,该函数可以将一个或多个对象的成员属性和方法复制到指定的对象

随机推荐