网页图片各种滤镜特效代码

透明代码（一）  

<img  src="图片地址"  style="filter:Alpha(opacity=100,finishOpacity=0,style=0)">

【代码说明】涉及到的属性:修改数值对应即可

opacity:开始处的透明度

finishOpacity:结束处的透明度

style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明

透明代码（二）  

<div  style="filter:Alpha(opacity=100,finishOpacity=0,style=0) ;width:宽;height:高">

<img src="图片地址">

</div>

【代码说明】涉及到的属性:修改数值对应即可

opacity:开始处的透明度

finishOpacity:结束处的透明度

style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明

模糊代码 

<div  style="filter:Blur(direction=135);width:滤镜宽;height:滤镜高" align=center> <br>

<img src="图片地址">

</div>

【代码说明】

(direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽＋15,滤镜高=图高＋30)

波形效果代码  

<div  style="filter:Wave(freq=7,strength=9,lightstrength=5,phase=5);width:滤镜宽;height:滤镜高" align=center> <br>

<img src="图片地址">

</div>

【代码说明】

(freq频率(>0)strength振幅强度(>0)lightstrength波峰强度(0~100

愈高越黑)phase起始相位(0~100),滤镜宽=图宽＋振幅强度×2，滤镜高=图高＋振幅强度×2＋10)

风吹效果代码

<CENTER>

<TABLE  style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" cellSpacing=5 cellPadding=0><TBODY<CENTER>

<TABLE  style="FILTER: wave(freq=11, strength=4, phase=6, lightstrength=10)"

图片静态倒影代码  

<p align=center><img height=高度 src="图片地址" width=宽度><BR>

<img style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" height=高度  src="图片地址" width=宽度>

</p>

圆形渐变透明（虚光）代码   

<CENTER>

<TABLE  style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" cellSpacing=5 cellPadding=0><TBODY>

<TR><TD width=图片宽度 background=图片地址height=图片高度></TD></TR>

</TBODY>

</TABLE>

</CENTER>

左右翻转代码 

<img src="图片地址" style="filter:FlipH">

或者

<div style="filter:FlipH ;width:宽;height:高"><img src="图片地址"></div>

上下翻转代码 

<img src="图片地址" style="filter:FlipV">

或者

<div style="filter:FlipV ;width:宽;height:高"><img src="图片地址"></div>

灰调格式代码 

<img src="图片地址" style="filter:Gray">

或者

<div style="filter:Gray ;width:宽;height:高"><img src="图片地址"></div>

X光效果代码 

<img src="图片地址" style="filter:Xray">

或者

<div style="filter:Xray ;width:宽;height:高"><img src="图片地址"></div>

色彩对换代码 

<img src="图片地址" style="filter:Invert">

浮雕效果代码  

<CENTER>

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Emboss()" cellSpacing=5

cellPadding=0>

<TBODY><TR><TD width=图片宽度 background=图片地址 height=图片高度></TD></TR>

</TBODY>

</TABLE>

</CENTER>

发光边框代码  

<div style="filter:Glow(color=#4A7AC9,strength=15);width:滤镜宽;height:滤镜高" align=center>

<br>

<img src="图片地址"></div>

【代码说明】

(color为发光颜色代码,strength是发光强度,滤镜宽=图宽＋发光强度×2，滤镜高=图高＋发光强度×2 ＋10)

投影边框代码 

<div style="filter:Shadow(color=#4A7AC9,direction=135);width:滤镜宽;height:滤镜高" ><br>

<img src="图片地址"></div>

【代码说明】

(color为发光颜色代码,direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽＋25)

阴影边框代码 

<div style="filter:Dropshadow(color=#333333,offX=5,offY=5);width:滤镜宽;height:滤镜高" ><br>

<img src="图片地址"></div>

【代码说明】

(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽 ＋水平位移绝对值＋ 10,滤镜高=图高 ＋垂直位移绝对值 ＋20)  图片各种滤镜特效代码

时间： 2024-10-16 04:53:55

网页图片各种滤镜特效代码的相关文章

20款带左右箭头的焦点图片轮播特效代码

20款带左右箭头的焦点图片轮播特效代码分享 html5带倒影3D图片叠加轮播切换特效 jQuery slide图片自动轮播滚动插件 jQuery焦点图插件带按钮控制图片轮播滚动代码 jquery仿hao123带新闻标题图片轮播滚动效果 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 jQuery带网上开户表单的焦点图轮播代码 jquery左右箭头控制带缩略图片轮播切换 jQuery responsiveslides.js响应式图片轮播特效 jQuery OwlCarousel图片滚动插件世界杯图

JS——网页图片轮播特效

焦点图轮播 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="Content-T

简单的鼠标滑动上去图片放大Jquery特效代码

<!DOCTYPE html> <html lang="en"> <head> <meta  charset=utf-8" /> <title>文字提示</title>  <!--   引入jQuery -->  <script src="scripts/jquery1.7.js" type="text/javascript"></sc

14种网页jQuery和css3特效插件代码演示

1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQuery a标签锚链滚动特效 演示和下载地址 6.css3自适应导航菜单栏 演示和下载地址 7.jQuery 100计时特效代码 演示和下载地址 8.html5视频播放器自定义美化代码 演示和下载地址 9.网页右侧悬浮滚动特效代码 下载和演示地址 10.网页能拖拽图层移动的js代码 演示和下载地址 11

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

常用的jQuery九宫格布局图片展示特效代码

jquery九宫格布局图片鼠标经过遮罩显示文字效果 jQuery图片九宫格布局鼠标悬停显示文字效果代码 jquery九宫格图片制作鼠标悬停图片滑动展示特效 jquery仿qq图片九宫格布局点击按钮图片换一换效果代码 jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery hover事件鼠标悬停九宫格图片高亮显示代码 jQuery百度新闻文字列表九宫格布局鼠标悬停文字滑动效果代码 jquery hover九宫格图片鼠标悬停上下滑动图片切换显示代码 jquery win8风格九宫格布

网页图片自动缩小代码 防止图片撑破表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

10几款网页图片手风琴效果代码

简单的jquery手风琴插件带标题的水平手风琴图片轮换代码 jQuery CSS3水平滑动手风琴文字图片切换特效代码 jquery水平滑动手风琴菜单鼠标点击图片展示手风琴菜单代码 jquery手风琴相册幻灯片图片横向滚动展开收缩代码 jquery手风琴菜单制作横向菜单切换手风琴效果代码 jquery动漫人物网的横向手风琴切换效果 jquery水平手风琴鼠标滑过图片标题水平滑动切换 jquery 水平手风琴鼠标滑过标题图片滑动切换 原生js水平手风琴弹性相册图片展示 jQuery的简易手风琴插件_

js图片点击放大特效代码

原文:js图片点击放大特效代码 源代码下载:http://www.zuidaima.com/share/1550463485676544.htm 图片放大js代码实现,运行效果如下: