效果：http://hovertree.com/texiao/css3/1/

本效果主要使用text-shadow实现.
参考：http://hovertree.com/h/bjaf/css3_text_effect.htm

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>
  6. <link rel="stylesheet" href="http://hovertree.com/texiao/css3/1/css/style.css" media="screen" type="text/css" />
  7. </head>
  8. <body>
  9. <!--For Firefox-->
  10. <style>a{color:blue}
  11. .test:after {
  12. filter: url(#light-top);
  13. }
  14.  
  15. .dilate:before {
  16. filter: url(#dilate10);
  17. }
  18.  
  19. .dilate:after {
  20. filter: url(#dilate6);
  21. }
  22.  
  23. .erode:after {
  24. filter: url(#erode2);
  25. }
  26.  
  27. .distant1:after {
  28. filter: url(#distant1);
  29. }
  30.  
  31. .distant-top:after {
  32. filter: url(#distant-top);
  33. }
  34.  
  35. .distant-front:after {
  36. filter: url(#distant-front);
  37. }
  38.  
  39. .diff1 {
  40. filter: url(#diff1);
  41. }
  42.  
  43. .bevel, .bevel:after {
  44. filter: url(#light2);
  45. }
  46. </style>
  47. <h1 class='outlinedA'>OutlinedA</h1>
  48. <h1 class='outlinedA mid'>OutlinedA</h1>
  49. <div>
  50. <a href="http://hovertree.com/h/bjaf/yishuzi.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a>
  51. </div>
  52. <h1 class='outlinedB'>OutlinedB</h1>
  53. <h1 class='hsl'>Hsl Colors</h1>
  54. <h1 class='test'>Test</h1>
  55. <h1 class='bottom'>Bottom Light</h1>
  56. <h1 class='dilate'>Dilate</h1>
  57. <h1 class='erode'>Erode</h1>
  58. <h1 class='distant1'>Distant Light</h1>
  59. <h1 class='distant-top'>Distant Top</h1>
  60. <h1 class='distant-front'>Distant Front</h1>
  61. <h1 class='diff1'>Diffused Light</h1>
  62. <h1 class='bevel'>Bevel</h1>
  63. <h1 style="font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink">何问起</h1>
  64. <h1 style="font-family:cursive;text-shadow:6px 2px 2px #666666;">hovertree.com</h1>
  65. </body>
  66. </html>

参考：

更多：http://www.cnblogs.com/roucheng/p/texiao.html

纯css3艺术文字样式效果代码的更多相关文章

  1. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  2. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  3. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

  4. css3火焰文字样式代码

    css样式: <style type="text/css"> body{background:#000;} *{margin:0;padding:0;transitio ...

  5. 用CSS3实现文字描边效果【效果在这儿，创意在你！】

    CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边. 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果.例: text-shadow:10px 5px 2px # ...

  6. markdown 使用示例，包含常用的标题、图片、文字样式、代码块、链接等

    ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/Markdown%E7%A4%BA%E4%BE%8B # ...

  7. 纯CSS3制作的“Ribbons”效果

    在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...

  8. 【CSS3】纯CSS3制作页面切换效果

    此前写的那个太复杂了,来点简单的核心 <html> <head> <title></title> <style type="text/c ...

  9. 纯CSS实现Tab切换标签效果代码

    在线演示地址如下: http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/ <!DOCTYPE html PUBLIC "-/ ...

随机推荐

  1. 如何使用Microsoft技术栈

    Microsoft技术栈最近有大量的变迁,这使得开发人员和领导者都想知道他们到底应该关注哪些技术.Microsoft自己并不想从官方层面上反对Silverlight这样的技术,相对而言他们更喜欢让这种 ...

  2. HTML5- Canvas入门（一）

    周老虎落网的时候,网易跟腾讯都推出了牛逼轰轰的HTML5页面来展示其关系网(网易http://news.163.com/special/data_zyk/  ,腾讯http://news.qq.com ...

  3. Lesson 5 No wrong numbers

    Text Mr.James Scott has a garage in Silbury and now he has just bought another garage in Pinhurst. P ...

  4. iOS开发系列--Objective-C之类和对象

    概述 前面已经简单介绍过ObjC的基础知识,让大家对ObjC有个大致的印象,今天将重点解释ObjC面向对象的特性.ObjC相对于C语言多了面向对象特性,但是ObjC又没有其他面向对象语言那么多语法特性 ...

  5. sqlalchemy(二)高级用法

    sqlalchemy(二)高级用法 本文将介绍sqlalchemy的高级用法. 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此需要在address上增 ...

  6. ASP.NET MVC 控制器激活(三)

    ASP.NET MVC 控制器激活(三) 前言 在上个篇幅中说到从控制器工厂的GetControllerInstance()方法来执行控制器的注入,本篇要讲是在GetControllerInstanc ...

  7. Chrome 控制台新玩法-console显示图片以及为文字加样式

    有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.lo ...

  8. Azure SQL Database (19) Stretch Database 概览

    <Windows Azure Platform 系列文章目录>  Azure SQL Database (19) Stretch Database 概览      Azure SQL Da ...

  9. 手把手教你搭建Hive Web环境

    了解Hive的都知道Hive有三种使用方式--CLI命令行,HWI(hie web interface)浏览器 以及 Thrift客户端连接方式. 为了体验下HWI模式,特意查询了多方的资料,都没有一 ...

  10. 2013 duilib入门简明教程 -- 事件处理和消息响应 (17)

        界面的显示方面就都讲完啦,下面来介绍下控件的响应.     前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEG ...