转至繁体中文版　　　  | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告：     敏韬网|教学资源学习资料永久免费分享站！  [mintao  2008年9月2日]        
您现在的位置： 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
Css不朽的经典—3D文字特效    热     ★★★★

Css不朽的经典—3D文字特效

作者：闵涛 文章来源：闵涛的学习笔记 点击数：668 更新时间：2009/4/23 13:49:51

效果：

3D Text

以下是一个用了blur滤镜而另一个没用的叠加效果

Ttop.cn Ttop.cn

Glass Text

这个是两个都用了alpha滤镜的效果

Ttop.cnTtop.cn

Inner Shadow

这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: -200px位置上形成的。

Ttop.cnTtop.cn

Outline Text

用mask, glow and chroma三个滤镜联合作用

Ttop.cn

与Marquee的完美结合

www.Ttop.cn www.Ttop.cn

源代码：

<style type="text/css">
<!--
.sample
  font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand;

-->
</style>
<title>Css不朽的经典—3D文字特效</title>
<div>
<h2>3D Text</h2>
 <p>以下是一个用了blur滤镜而另一个没用的叠加效果</p>
 <p onClick="alert(this.innerHTML)"> <span class="sample"
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
>Ttop.cn</span><span class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;">
 Ttop.cn</span> </p>
 <h2>Glass Text</h2>
 <p>这个是两个都用了alpha滤镜的效果</p>
 <p onClick="alert(this.innerHTML)"> <span class="sample"
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);"
>Ttop.cn</span><span class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);"
>Ttop.cn</span> </p>
 <h2>Inner Shadow</h2>
 <p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left:
 -200px位置上形成的。</p>
 <p onClick="alert(this.innerHTML)"> <span class="sample"
style="width: 200px; height: 70; color: white;"
>Ttop.cn</span><span class="sample"
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);"
>Ttop.cn</span> </p>
 <h2>Outline Text</h2>
 <p>用mask, glow and chroma三个滤镜联合作用</p>
 <p onClick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; filter: mask(color=red) glow(color=black, strength=1) chroma(color=red);">Ttop.cn</span> </p>
<h2>与Marquee的完美结合</h2>
<p onClick="alert(this.innerHTML)"> <span class="sample"
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span>
<span class="sample"
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;">
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">www.Ttop.cn</marquee></span> </p>
</div>


[网页制作]Dreamweaver超级技巧之文字特效  
教程录入：mintao    责任编辑：mintao 
  • 上一篇教程：

  • 下一篇教程：
    • 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
    　 注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]
    　　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
    		•
    赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题，因而无法显示。
    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长：MinTao ICP备案号：鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网。A打造B、C、D……
    		咸宁网络警察报警平台