`

最基本的几种 CSS 文字滤镜效果

CSS 
阅读更多
<table border=1 style="border-style: solid; border-width: 1;font-size=12px" width="520">
  <tr>
    <td width="510">
    <span style="font-size:30pt;display:block;
             text-align:center;color:blue;
             filter:glow(color=red,strength=10);height:1">一路阳光  </span></td>
  </tr>
  <tr>
    <td width="510">
    <span style="font-size:30pt;display:block;
             text-align:center;color:darkblue;
             filter:blur(add=t,direction=135,strength=10);height:1">一路阳光</span></td>
  </tr>
  <tr>
    <td width="510">
<div style="color:red;font-size:25pt;height:1;display:block;
filter:progid:DXImageTransform.Microsoft.motionblur(strength=30,add=1,direction=135)">
        <p align="center"> 一路阳光</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="height:1;width:100%;
   font-family:impact;font-size:30pt;color:navy;display:block;
   filter:progid:DXImageTransform.Microsoft.wave(Strength=3)">
        <p align="center"> 一路阳光</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="height:1;width:100%;
   font-family:impact;font-size:30pt;color:navy;display:block;
   filter:progid:DXImageTransform.Microsoft.wave(Strength=3,freq=5)">
        <p align="center"> 一路阳光</div></td>
  </tr>
  <tr>
    <td width="510">
<span style="font-size:30pt;display:block;
             text-align:center;color:darkblue;
             filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);
             height:1">一路阳光</span></td>
  </tr>
  <tr>
    <td width="510">
<span style="font-size:30pt;display:block;
             text-align:center;color:darkblue;
             filter:shadow(color=blue);height:1">一路阳光</span></td>
  </tr>
  <tr>
    <td width="510">
<div align="center" style="height:1;font-size:30pt;
filter:dropshadow(color=maroon,positive=1);">一路阳光</div></td>
  </tr>
  <tr>
    <td width="510">
<div align="center" style="height:1;font-size:30pt;
filter:dropshadow(color=maroon,positive=0);">一路阳光</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5);
height:1;font-size:20pt;font-family:impact;background-color:blue">
        <p align="center">SUNNY</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5);
height:1;font-family:impact;font-size:20pt;background-color:blue">
        <p align="center">SUNNY</div></td>
  </tr>
  <tr>
    <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font color="blue" size="6"><b>一路阳光</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=blue,direction=135)" align="center"><font color="blue" size="6"><b>一路阳光</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font  color="blue" size="6"><b>一路阳光</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font  color=#E1E4EC size=6><b>一路阳光</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font 
color=#8C96B5 size=6><b>一路阳光</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height=54><font color=#8C96B5 size=6><b>一路阳光</b></font></td>
  </tr>
  <tr>
    <td><span style="position:absolute;font-size:30pt;color=blue;filter:fliph">一路阳光</span></td>
  </tr>
  <tr>
    <td><span style="position:absolute;left:200;font-size:30pt;color=blue;filter:flipv">一路阳光</span></td>
  </tr>
</table>
<table align=center background="http://www.idc2008.com/468X60-8.gif" border=0>
  <tr>
    <td style="FILTER: glow(strength=4)mask(color=#E1E4EC)"><font size="7"> <b>一路阳光</b></font></td>
  </tr>
</table>
分享到:
评论

相关推荐

    css文字滤镜.pdf

    根据所提供的部分内容,我们可以看到几种CSS文字滤镜的应用实例。下面将详细介绍这些滤镜的效果及使用方法: 1. **glow**:发光效果。 - **示例代码**: ```html ;display:block;text-align:center;color:blue;...

    HTML基础5-Css的滤镜效果.pdf

    CSS滤镜效果是CSS样式中的一种特性,用于对网页元素(如文字、图像等)应用各种视觉特效。这些效果通常用于增强网页的视觉吸引力,而不会显著增加页面的加载时间。在HTML基础5-Css的滤镜效果中,主要介绍了几个常用...

    css3彩色霓虹灯文字特效.zip

    我们可以为文字设置一个背景渐变,使颜色从一种色调平滑过渡到另一种,以此来模拟光源从内部照亮文字的效果。 2. **光晕效果**:使用模糊滤镜(blur filter)可以创建霓虹灯的光晕效果。将模糊滤镜应用于文字的副本...

    基于HTML5+SVG绘制的鼠标跟随滤镜文字特效源码.zip

    在这个特效中,CSS3可能被用来定义文字的基本样式,以及在鼠标移动时的动态变化,如颜色渐变、旋转、缩放等。 3. **JavaScript交互**:JavaScript是实现网页动态行为的关键。在这个特效中,JavaScript负责监听鼠标...

    15种CSS3实现鼠标悬停图片hover动画过渡特效源码.zip

    在提供的源码中,你可能会看到以下几种常见的CSS3过渡效果: 1. 图片颜色变换:通过改变背景色或边框颜色实现。 2. 缩放效果:图片在悬停时放大或缩小。 3. 旋转效果:图片在悬停时顺时针或逆时针旋转。 4. 平移动画...

    15款css3鼠标悬停图片动画文字特效源码.zip

    在这些源码中,可能包含以下几种常见的鼠标悬停特效: 1. 图片渐变替换:悬停时,图片逐渐变为另一张图片,常用于按钮或产品展示。 2. 文字颜色流动:悬停时,文字颜色按特定路径或顺序改变,增加视觉冲击力。 3. ...

    CSS3 SVG霓虹灯文字特效

    其中,“CSS3 SVG霓虹灯文字特效”是一种非常流行的技术,它能为网站添加酷炫的霓虹灯风格的文字动画。这种特效结合了CSS3的强大样式控制和SVG(Scalable Vector Graphics)的矢量图形优势,能够实现流畅、高质量的...

    CSS 文字加阴影变3D效果演示

    在这个CSS文字加阴影变3D效果演示的例子中,首先展现了CSS在处理文字效果方面的强大功能。CSS不仅能够给文字添加阴影效果,还能添加背景、改变文字颜色以及创建立体的3D效果。通过研究和实践这些示例,即便是初学者...

    CSS3与SVG实现文字背景动画炫酷特效源码.zip

    在IT领域,CSS3(Cascading Style Sheets Level 3)是用于定义网页表现样式的一门语言,它极大地扩展了其前几代的功能,为网页设计师提供了更多创新和个性化设计的可能性。SVG(Scalable Vector Graphics)则是一种...

    JS+CSS3绘制数字科技脸元素图形特效

    本项目“JS+CSS3绘制数字科技脸元素图形特效”就是这样一个例子,它结合了JS动态生成和CSS3的高级特性,为用户提供了一种新颖且具有科技感的交互体验。下面将详细介绍这一特效的实现原理和关键知识点。 首先,我们...

    Js+CSS 文字渐隐渐现显示

    JavaScript和CSS结合实现的文字渐隐渐现效果,也被称为淡入淡出效果,是一种常见的动态视觉效果,常用于网页设计中提升用户体验。这种效果最初在视频编辑和Flash动画中使用,但现在已经被广泛应用到网页文本中,增加...

    CSS3动画河流时间轴代码

    主要利用了CSS3的动画效果和布局特性来构建一个动态的时间轴,其特点在于将时间轴元素设计成河流的形态,用户在鼠标悬停在特定的日期或年份上时,可以展现出相关的文字详情介绍,提供了一种直观且互动的展示方式。...

    css照片表白+音乐特效

    【标题】"CSS照片表白+音乐特效"是一个利用CSS技术实现的创意互动应用,它将静态的照片与动态的音乐效果相结合,创造出一种富有情感表达的视觉体验。在Web设计领域,这种结合可以增加用户交互性,提升网页的吸引力。...

    利用CSS3实现毛玻璃效果示例

    毛玻璃效果(Frosted Glass Effect),是一种流行的视觉效果,通过模糊背景内容来创建一种半透明的视觉效果,从而使用户界面更加美观且具有层次感。在网页设计中,毛玻璃效果可以通过CSS3的属性来实现,它允许开发者...

    CSS兼容/CSS兼容方案整理

    本文档将详细介绍几种常用的CSS兼容性解决方案,包括CSS Hack技术、清除浮动方法以及解决特定浏览器问题的技巧。 #### 1. CSS Hack 技术 CSS Hack是一种特殊的技术,用于解决不同浏览器间CSS支持差异的问题。它...

    纯CSS3+SVG实现的沙漠、金字塔和月亮场景效果源码.zip

    1. **渐变和阴影**:CSS3允许创建线性渐变、径向渐变以及盒阴影和文字阴影,这些可以用于模拟沙漠中的光影效果,如太阳照射在沙丘上的渐变色彩和金字塔的阴影。 2. **变形和动画**:通过`transform`属性,可以对...

    CSS3毛玻璃效果(blur)有白边问题的解决方法

    解决这个问题的方法有几种。首先,我们可以调整`background-size`属性。当背景图像的尺寸与元素本身不匹配时,可能会在模糊过程中产生边界效应,形成白边。将`background-size`从`cover`改为`150% 150%`可以让背景...

    举例详解CSS中的text-shadow文字阴影效果使用

    通过将文本颜色设为透明,只保留阴影,达到一种模糊文字的效果。 以上就是关于CSS中`text-shadow`属性的详解,通过巧妙地组合这些参数,开发者可以创造出各种独特且引人注目的文本样式,提升网站或应用的视觉体验...

Global site tag (gtag.js) - Google Analytics