淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。
B型天秤座
2011-03-18 23:16:30| 分类: HTML专区 | 标签: |举报 |字号大中小 订阅
用微信 “扫一扫”
将文章分享到朋友圈。
用易信 “扫一扫”
HTML
反转文字(滤镜filter:Flip)
反转文字(滤镜filter:Flip)博文简介
反转特效文字效果其实就是运用了滤镜filter 属性之一滤镜filter:Flip(使元素反转)。 Flip是CSS滤镜的反转属性: FlipH代表水平方向反转 FlipV代表垂直方向反转 它们的原理都是制作一个镜像,然后让指定元素在水平或垂直方向实现反转。它们的表达式很简单,分别是: Filter:FlipH Filter:FlipV 更多运用在图片的反转和Filter:FlipV制作倒影字特效。 相关更多滤镜属性点击链接参照:滤镜filter 属性
反转特效文字效果其实就是运用了滤镜filter 属性之一滤镜filter:Flip(使元素反转)。
Flip是CSS滤镜的反转属性:
FlipH代表水平方向反转
FlipV代表垂直方向反转
它们的原理都是制作一个镜像,然后让指定元素在水平或垂直方向实现反转。它们的表达式很简单,分别是:
Filter:FlipH
Filter:FlipV
更多运用在图片的反转和Filter:FlipV制作倒影字特效。
相关更多滤镜属性点击链接参照:滤镜filter 属性
1、HTML相关术语:
TABLE 标签是一个容器标记:<table>...</table>P 标签定义段落容器标记:<p>...</p>DIV标签严格的组织容器标记:<div>...</div> EM文本倾斜<em>...</em>或者运用I文本倾斜<i>...</i>size 属性定义的是以像素为单位的输入字段宽度。font 规定文本的字体、字体尺寸、字体颜色。<font>...</font> font-size 属性可设置字体的尺寸。该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。color颜色值。
TABLE 标签是一个容器标记:<table>...</table>P 标签定义段落容器标记:<p>...</p>DIV标签严格的组织容器标记:<div>...</div>
EM文本倾斜<em>...</em>或者运用I文本倾斜<i>...</i>size 属性定义的是以像素为单位的输入字段宽度。font 规定文本的字体、字体尺寸、字体颜色。<font>...</font> font-size 属性可设置字体的尺寸。该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。color颜色值。
水平反转
TABLE 标签基本代码:<TABLE style="Filter:FlipH"><TR><TD><FONT color=颜色值 size=字体大小值>水平反转文字效果</FONT></table>P 标签基本代码:<P style="FONT-SIZE: 字体大小值pt; Filter:FlipH; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px" FONT>水平反转文字效果</FONT></P>DIV 标签基本代码:<DIV style="Filter:FlipH; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px"><FONT size=字体大小值>水平反转文字效果</FONT></DIV>
垂直反转
TABLE 标签基本代码:<TABLE style="Filter:Flipv"><TR><TD><FONT color=颜色值 size=字体大小值>垂直反转文字效果</FONT></table>P 标签基本代码:<P style="FONT-SIZE: 字体大小值pt; Filter:Flipv; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px" FONT>垂直反转文字效果</FONT></P>DIV 标签基本代码:<DIV style="Filter:Flipv; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px"><FONT size=字体大小值>垂直反转文字效果</FONT></DIV>
3、设置示例:
设置代码参数说明
字体颜色值 color=#4a7ac9 字体文本框大小值: 在TABLE 标签、DIV标签内相同size=5(在DIV标签内HEIGHT: 35px设置了文本框的高度、设置了文本框宽度WIDTH: 216px) 在P 标签内font-size:18pt (实际设置了字体中字符框的高度)、设置文本框的高度HEIGHT:20pt、设置了文本框宽度WIDTH:216px
字体颜色值
color=#4a7ac9
字体文本框大小值:
在TABLE 标签、DIV标签内相同size=5(在DIV标签内HEIGHT: 35px设置了文本框的高度、设置了文本框宽度WIDTH: 216px)
在P 标签内font-size:18pt (实际设置了字体中字符框的高度)、设置文本框的高度HEIGHT:20pt、设置了文本框宽度WIDTH:216px
代码如下:
TABLE 标签代码:<TABLE style="Filter:FlipH"><TR><TD><FONT color=#4a7ac9 size=5>水平反转文字效果</FONT></TD></TR></table>P 标签代码:<P style="FONT-SIZE: 18pt; Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>水平反转文字效果</FONT></P>DIV 标签代码:<DIV style="Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>水平反转文字效果</FONT></DIV>
TABLE 标签代码:<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5>垂直反转文字效果</FONT></TD></TR></table>P 标签代码:<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>垂直反转文字效果</FONT></P>DIV 标签代码:<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>垂直反转文字效果</FONT></DIV>
倒影字特效
TABLE 标签代码:<TABLE><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table><TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>P 标签代码:<P style="FONT-SIZE: 18pt; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P><P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>DIV 标签代码:<DIV style="WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV><DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>
代码演示示例
TABLE 标签代码:<TABLE style="Filter:FlipH"><TR><TD><FONT color=#4a7ac9 size=5>水平反转文字效果</FONT></TD></TR></table> 水平反转文字效果 P 标签代码:<P style="FONT-SIZE: 18pt; Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>水平反转文字效果</FONT></P> 水平反转文字效果 DIV 标签代码:<DIV style="Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>水平反转文字效果</FONT></DIV> 水平反转文字效果
TABLE 标签代码:<TABLE style="Filter:FlipH"><TR><TD><FONT color=#4a7ac9 size=5>水平反转文字效果</FONT></TD></TR></table>
水平反转文字效果
P 标签代码:<P style="FONT-SIZE: 18pt; Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>水平反转文字效果</FONT></P>
DIV 标签代码:<DIV style="Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>水平反转文字效果</FONT></DIV>
TABLE 标签代码:<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5>垂直反转文字效果</FONT></TD></TR></table> 垂直反转文字效果 P 标签代码:<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>垂直反转文字效果</FONT></P> 垂直反转文字效果 DIV 标签代码:<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>垂直反转文字效果</FONT></DIV> 垂直反转文字效果
TABLE 标签代码:<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5>垂直反转文字效果</FONT></TD></TR></table>
垂直反转文字效果
P 标签代码:<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>垂直反转文字效果</FONT></P>
DIV 标签代码:<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>垂直反转文字效果</FONT></DIV>
TABLE 标签代码:<TABLE><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table><TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table> 倒影文字效果 倒影文字效果 P 标签代码:<P style="FONT-SIZE: 18pt; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P><P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P> 倒影文字效果 倒影文字效果 DIV 标签代码:<DIV style="WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV><DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV> 倒影文字效果 倒影文字效果
TABLE 标签代码:<TABLE><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table><TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>
倒影文字效果 倒影文字效果
P 标签代码:<P style="FONT-SIZE: 18pt; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P><P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>
倒影文字效果
DIV 标签代码:<DIV style="WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV><DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>
推荐过这篇日志的人:
他们还推荐了:
网易公司版权所有 ©1997-2018
评论