引用~星 VML語法的文字變化(2) - 【平安旅者の部落格】

字體：小中大

引用~星 VML語法的文字變化(2)

2008/04/15 14:22:45瀏覽1665｜回應3｜推薦51

改變filled="f"與顏色效果:

<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:line style="position: absolute; top: 60px; left: 30px" stroked="t" strokecolor="#ffffff" strokeweight="1px" filled="f" fillcolor="RED" to="400 .1">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:標楷體" on="t" fitpath="t" string="文字的顏色特效"/>
</v:line>
</DIV>
文字圓形走向特效:

<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:180px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:oval style="Z-INDEX:1;LEFT:190;WIDTH:139;POSITION:absolute;TOP:30;HEIGHT:137" filled="t" fillcolor="#FFFF00" stroked="f">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:60;FONT-FAMILY:標楷體" on="t" fitpath="t" string="文字圓形走向特效文字圓形走向特效"/>
<v:fill type="gradient" method = "none" opacity="1" angle="45" color2="#FFFF00" colors = "30% #00FF00,60% blue,60% purple" />
</v:oval >
</DIV>
文字圓弧走向特效:

<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:Arc strokeweight="1pt" strokecolor="#FF9966" style="position:absolute; width:300; height:110; left:130; top:-30" StartAngle="-120" EndAngle="-240" filled="t" fillcolor="#0000FF" stroked="f">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:60;FONT-FAMILY:標楷體" on="t" fitpath="t" string="文字圓弧走向特效"/>
<v:fill type="gradient" method = "none" opacity="1" angle="90" color2="#FFFF00" colors = "30% #00FF00,60% blue,60% purple" />
</v:Arc>
</DIV>
文字斜度走向特效:

<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:line style="position: absolute; top: 90px; left: 130px" stroked="f" strokecolor="#FFFF66" filled="t" fillcolor="RED" to="260 -30">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:60;FONT-FAMILY:標楷體" on="t" fitpath="t" string="文字斜度走向特效"/>
<v:fill type="gradient" method = "none" opacity="1" angle="90" color2="#FFFF00" colors = "30% #00FF00,60% blue,60% purple" />
</v:line>
</DIV>
文字的立體效果:

<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:line style="position: absolute; top: 60px; left: 30px" stroked="f" strokecolor="#FFFF66" filled="t" fillcolor="RED" to="400 .1">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:60;FONT-FAMILY:標楷體" on="t" fitpath="t" string="文字的立體效果"/>
<v:fill type="gradient" method = "none" opacity="1" angle="90" color2="#FFFF00" />
<v:extrusion on="t" backdepth="30pt" color="#666666" diffusity="1.1"/>
</v:line>
</DIV>
語法分析：
backdepth　立體厚度。
color　立體顏色。
diffusity　描述立體基本亮度，值0-3。
skewangle　需要改變立體方向的可把這個屬性加上，值0-360，相當於角度。
曲線圖片文字的特效:

<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:curve style="Z-INDEX:1;LEFT:60;POSITION:absolute;TOP:50" to="420px,0px" stroked="f" fillcolor="yellow" control1="210,50" control2="210,-50">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:60;FONT-FAMILY:標楷體" on="t" fitpath="t" string="圖片文字的特效"/>
<v:fill src="圖片位址" type="frame" opacity="1"/>
</v:curve>
</DIV>
---文字角度
---修改圖片
改變顏色的透明度和角度:

<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:line style="position: absolute; top: 60px; left: 30px" stroked="f" strokecolor="#FFFF66" filled="t" fillcolor="RED" to="400 .1">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:60;FONT-FAMILY:標楷體" on="t" fitpath="t" string="文字的顏色特效"/>
<v:fill type="gradient" method = "none" opacity="-3" angle="-180" color2="#FFFF00" />
</v:line>
</DIV>
改變顏色的透明度和角度：opacity=".3" angle="-180"可變不同效果

( 知識學習｜檔案分享 )


	引用者清單(4)


	回應文章