: JavaScript; jQuery; Html/CSS; Html5; Dreamweaver; XML; Ajax; Flash; Silverlight

当前位置：首页 > 网站制作 > Html/CSS教程 > 正文

css静态滤镜

2016-11-23
来源：阿龙网
作者：
人气：0
评论：0

很无聊的把n个滤镜堆在一起就成了下面这个效果，呵呵 IE5.5+Only #pp00 { width:950px; height:256px; position:absolu

很无聊的把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:absowww.alonely.com.cnlute;     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>   诘屈聱牙   <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  <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滤镜教程 html+css静态网页

感觉不错，赞哦！ 0

转载请注明来自百度排名优化 /Html-CSS/20161123/69405.html

上一篇：CSS 实用实例(推荐)
下一篇：web标准布局实例教程，用定位轻松解决CSS复杂布局

相关推荐

无相关信息

网友评论

共有0条评论

热门评论

我要评论

热门排行

图文信息

CSS超级技巧大放送合集

一.使用css缩写使用缩写可以帮助减少你CSS文件的大小，...
3个效果超酷的FORM表单美化效果打包下载

第一个效果图：打包下载----------------------------...
首届世界CSS设计大赛结果揭晓

Site of the YearWinner: UX Magazine 2nd.- Veerle'...
web标准布局实例教程，用定位轻松解决CSS复

我相信来经典论坛学习标准的朋友，99%都不是为了进W3C...
给图片加阴影效果的CSS

.pic { position:relative; background:#CCC; margi...
HTML表单元素覆盖样式元素问题及其补救之道

在设计HTML页面的过程中经常会遇到表单元素覆盖样式元...
CSS滤镜示范(filter)附源代码(静态滤镜)

filter(css滤镜) body { margin: 0px; paddi...
top、clientTop、scrollTop、offsetTop

top、clientTop、scrollTop、offsetTop　　图示说明如...
典型的三行二列居中高度自适应布局

如何使整个页面内容居中，如何使高度适应内容自动伸缩...
文字应用css滤镜集锦

.abc { line-height: 22px} .t12 { font-family:华文...

相关专题

最新信息

CSS超级技巧大放送合集

3个效果超酷的FORM表单美化效果打包下载

首届世界CSS设计大赛结果揭晓

web标准布局实例教程，用定位轻松解决CSS复

给图片加阴影效果的CSS

HTML表单元素覆盖样式元素问题及其补救之道

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

top、clientTop、scrollTop、offsetTop

典型的三行二列居中高度自适应布局

文字应用css滤镜集锦