巧用CSS制作特效艺术字(7例)

1.blur滤镜效果:

代码如下:


 <TABLE height=50 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: blur(direction=135,strength=8)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>欢迎光临WEB开发网www.cncms.com.cn!</I></B></FONT></TD></TR></TBODY></TABLE>
 

2.dropshadow滤镜效果:

代码如下:


<TABLE height=50 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>欢迎光临WEB开发网www.cncms.com.cn!</I></B></FONT></TD></TR></TBODY></TABLE>
 

3.glow滤镜效果

代码如下:


 <TABLE height=50 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: glow(color=#B4BBCF,strength=5)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>欢迎光临WEB开发网www.cncms.com.cn!</I></B></FONT></TD></TR></TBODY></TABLE>
 

4.两种滤镜.shadow和alpha效果:

代码如下:

 <TABLE height=50 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=#8C96B5,direction=135)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>欢迎光临WEB开发网www.cncms.com.cn!</I></B></FONT></TD></TR></TBODY></TABLE>


5.两个滤镜mask和shadow效果

代码如下:

<TABLE height=50 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>欢迎光临WEB开发网www.cncms.com.cn!</I></B></FONT></TD></TR></TBODY></TABLE>
 

6. 用glow滤镜可以做空心字,方法是将字体颜色设置为背景色,

再将glow滤镜的strenght的值设置为1或2即可。

代码如下:

<TABLE height=50 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align=middle><FONT face=黑体 color=#e1e4ec size=6><B><I>欢迎光临WEB开发网www.cncms.com.cn!</I></B></FONT></TD></TR></TBODY></TABLE>


7.

代码如下:

<TABLE height=50 cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: glow(strength=4)mask(color=#E1E4EC)" vAlign=center align=middle height=50><FONT face=Verdana color=#8c96b5 size=6><I><B>欢迎光临WEB开发网www.cncms.com.cn!</B></I></FONT></TD></TR></TBODY></TABLE>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是详细说明: 使用CSS3中的text-shadow属性可以在文本周围添加阴影效果,从而实现文流光渐变特效。下面是一个使用CSS3制作流光渐变特效的示代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3文流光渐变特效</title> <style type="text/css"> /* 设置文本样式 */ #text { font-size: 60px; /* 文本大小 */ font-family: "微软雅黑"; /* 文本体 */ color: #fff; /* 文本颜色 */ text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #0ff, 0 0 60px #0ff, 0 0 70px #0ff, 0 0 80px #0ff; /* 文本阴影效果,多次添加阴影实现流光渐变效果 */ } </style> </head> <body> <div id="text">CSS3文流光渐变特效</div> </body> </html> ``` 解释一下这段代码的实现方法: 1. 首先设置文本的样式,包括文本大小、体和颜色。 2. 利用text-shadow属性添加多个阴影效果,每个阴影的参数依次为水平偏移量、垂直偏移量、模糊半径和阴影颜色。其中,模糊半径越大阴影越模糊,阴影颜色越接近文本颜色越接近文本,从而实现流光渐变的效果。 3. 在文本的标签中添加id属性,用于在CSS中设置该元素的样式。 4. 在CSS中,选择id为text的元素,设置其样式,包括文本样式和阴影效果。 这样就可以实现文流光渐变特效了。你可以根据自己的需要调整文本样式和阴影效果,实现更加个性化的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值