制作局部雾化变形效果图代码及实例6款.docx
《制作局部雾化变形效果图代码及实例6款.docx》由会员分享，可在线阅读，更多相关《制作局部雾化变形效果图代码及实例6款.docx（7页珍藏版）》请在冰点文库上搜索。
制作局部雾化变形效果图代码及实例6款
制作局部雾化变形效果图代码及实例6款
效果图一
效果图二
效果图三
效果图四
效果图五
效果图六
图片素材一
图片素材二图片素材三
注释
图片雾化代码、粒状阴影边框代码，用html语言设计图片特效很难实现图片变形效果，图片局部雾化代码设计这款代码供朋友们参考，无论图片大小，都以此参数固定高度和宽度。
试做一下即可体会。
替换图片地址后预览满意即可发表。
红色代码是局部雾化的参数，关于参数Alpha（Opacity=?
FinishOpacity=?
Style=?
StartX=?
StartY=?
FinishX=?
FinishY=?
）请看下列解释。
关于参数Alpha（Opacity=?
FinishOpacity=?
Style=?
StartX=?
StartY=?
FinishX=?
FinishY=?
）的解释参见：
语法：
{FILTER：
ALPHA（opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy）}
"Alpha"属性是把一个目标元素与背景混合。
设计者可以指定数值来控制混合的程度。
这种“与背景混合”通俗地说就是一个元素的透明度。
通过指定坐标，可以指定点、线、面的透明度。
他们的参数含义分别如下：
"opacity"代表透明度水准。
默认的范围是从0到100，他们其实是百分比的形式。
也就是说，0代表完全透明，100代表完全不透明。
”finishopacity"是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。
范围也是0到100。
"style"参数指定了透明区域的形状特征。
其中0代表统一形状、1代表线形、2代表放射状、
3代表长方形。
"STARTX"和"STARTY"代表渐变透明效果的开始X和Y坐标。
"FINISHX“和”
FINISHY"代表渐变透明效果结束X和Y的坐标。
styleStyle设置或检索透明渐变的样式。
opacityOpacity设置或检索透明渐变的开始透明度。
finishOpacityFinishOpacity设置或检索透明渐变的结束透明度。
startXStartX设置或检索透明渐变开始点的水平坐标。
startYStartY设置或检索透明渐变开始点的垂直坐标。
finishXFinishX设置或检索透明渐变结束点的水平坐标。
finishYFinishY设置或检索透明渐变结束点的垂直坐标。
说明：
调整对象内容的透明度。
你可以设置整体透明度，或线性渐变和放射渐变的透明度。
特别说明：
图片素材来源于网络。
效果图一代码
<DIVstyle="FILTER:
Glow（color=#ee0000,strength=70）;HEIGHT:
400px"align=center>
<TABLEheight=500width="100%"bgColor=#ee0000>
<TBODY>
<TR>
<TD><IMGstyle="FILTER:
alpha（opacity=100,finishopacity=0,startx=100,starty=0,finishx=0,finishy=0,style=1）"height=400src="width=600></TD></TR></TBODY></TABLE></DIV>
效果图二代码
<DIVstyle="FILTER:
Glow（color=#ee0000,strength=70）;HEIGHT:
400px"align=center>
<TABLEheight=500width="100%"bgColor=#ee0000>
<TBODY>
<TR>
<TD><IMGstyle="FILTER:
alpha（opacity=100,finishopacity=0,startx=0,starty=0,finishx=100,finishy=0,style=1）"height=400src="width=600></TD></TR></TBODY></TABLE></DIV>
效果图三代码
<DIVstyle="FILTER:
Glow（color=#ee0000,strength=70）;HEIGHT:
400px"align=center>
<TABLEheight=400width="100%"bgColor=#ee0000>
<TBODY>
<TR>
<TD><IMGstyle="FILTER:
alpha（opacity=0,finishopacity=100,startx=0,starty=0,finishx=0,finishy=100,style=1）"height=400src="width=650>
<P> </P>
<P> </P></TD></TR></TBODY></TABLE></DIV>
效果图四代码
<DIVstyle="FILTER:
Glow（color=#ee0000,strength=70）;HEIGHT:
400px"align=center>
<TABLEheight=400width="100%"bgColor=#ee0000>
<TBODY>
<TR>
<TD>
<P> </P>
<P> </P><IMGstyle="FILTER:
alpha（opacity=0,finishopacity=100,startx=0,starty=100,finishx=0,finishy=0,style=1）"height=400src="width=650></TD></TR></TBODY></TABLE></DIV>
效果图五代码
<DIVstyle="FILTER:
Glow（color=#ee0000,strength=70）;HEIGHT:
400px"align=center>
<TABLEheight=400width="100%"bgColor=#ee0000>
<TBODY>
<TR>
<TD>
<P> </P>
<P> </P><IMGstyle="FILTER:
alpha（opacity=100,finishopacity=0,startx=80,starty=20,finishx=0,finishy=0,style=1）"height=400src="width=600>
<P> </P>
<P> </P></TD></TR></TBODY></TABLE></DIV>
效果图六代码
<DIVstyle="FILTER:
Glow（color=#ee0000,strength=70）;HEIGHT:
400px"align=center>
<TABLEheight=400width="100%"bgColor=#ee0000>
<TBODY>
<TR>
<TD><IMGstyle="FILTER:
alpha（opacity=0,finishopacity=100,startx=0,starty=0,finishx=20,finishy=80,style=1）"height=400src="width=600>
<P> </P>
<P> </P></TD></TR></TBODY></TABLE></DIV>
升级会员 