首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS3制作炫酷的自定义发光文字

所属分类： 网页制作 / CSS 阅读数： 1161
收藏 0 赞 0 分享

本文为大家分享一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效，如果你的网络无法加载这些字体，可能是由于国外的这个网站被墙的缘故，就像google的字体库网址被屏蔽那样。

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <div id="container">  
  2.   
  3.   <p><a href="#">  
  4.     RED   
  5.   </a></p>  
  6.   
  7.   <p><a href="#">  
  8.     BLUE   
  9.   </a></p>  
  10.   
  11.   <p><a href="#">  
  12.     Yellow   
  13.   </a></p>  
  14.   
  15.   <p><a href="#">  
  16.     GREEN   
  17.   </a></p>  
  18.   
  19.   <p><a href="#">  
  20.     ORANGE   
  21.   </a></p>  
  22.   
  23.   <p><a href="#">  
  24.     VIOLET   
  25.   </a></p>  
  26.   
  27. </div>  
  28.   

CSS代码

CSS Code复制内容到剪贴板
  1. /*setup*/  
  2. *{   
  3.   margin: 0;   
  4.   padding: 0;   
  5. }   
  6.   
  7. @font-face {   
  8.   font-family: 'Monoton';   
  9.   font-style: normal;   
  10.   font-weight: 400;   
  11.   src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');   
  12. }   
  13.   
  14. @font-face {   
  15.   font-family: 'Iceland';   
  16.   font-style: normal;   
  17.   font-weight: 400;   
  18.   src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff');   
  19. }   
  20.   
  21. @font-face {   
  22.   font-family: 'Pacifico';   
  23.   font-style: normal;   
  24.   font-weight: 400;   
  25.   src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');   
  26. }   
  27.   
  28. @font-face {   
  29.   font-family: 'PressStart';   
  30.   font-style: normal;   
  31.   font-weight: 400;   
  32.   src: local('Press Start 2P'), local('PressStart2P-Regular'), url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format('woff');   
  33. }   
  34.   
  35. @font-face {   
  36.   font-family: 'Audiowide';   
  37.   font-style: normal;   
  38.   font-weight: 400;   
  39.   src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');   
  40. }   
  41.   
  42. @font-face {   
  43.   font-family: 'Vampiro One';   
  44.   font-style: normal;   
  45.   font-weight: 400;   
  46.   src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');   
  47. }   
  48.   
  49. body{   
  50.   background-color: #222222;   
  51. }   
  52.   
  53. #container{   
  54.   
  55.   margin:auto;   
  56. }   
  57.   
  58. /*neeeeoooon*/  
  59. p{   
  60.   text-align:center;   
  61.   font-size:7em;   
  62.   margin:20px 0 20px 0;    
  63. }   
  64.   
  65. a{   
  66.   text-decoration:none;    
  67.   -webkit-transition: all 0.5s;   
  68.   -moz-transition: all 0.5s;   
  69.   transition: all 0.5s;   
  70. }   
  71.   
  72. p:nth-child(1) a{   
  73.   color:#FF1177;   
  74.   font-family:Monoton;   
  75. }   
  76. p:nth-child(1) a:hover{   
  77.   -webkit-animation: neon1 1.5s ease-in-out infinite alternate;   
  78.   -moz-animation: neon1 1.5s ease-in-out infinite alternate;   
  79.   animation: neon1 1.5s ease-in-out infinite alternate;    
  80. }   
  81.   
  82. p:nth-child(2) a{   
  83.   font-size:1.5em;   
  84.   color:#228DFF;   
  85.   font-family:Iceland;   
  86. }   
  87. p:nth-child(2) a:hover{   
  88.   -webkit-animation: neon2 1.5s ease-in-out infinite alternate;   
  89.   -moz-animation: neon2 1.5s ease-in-out infinite alternate;   
  90.   animation: neon2 1.5s ease-in-out infinite alternate;   
  91. }   
  92.   
  93. p:nth-child(3) a{   
  94.   color:#FFDD1B;   
  95.   font-family:Pacifico;   
  96. }   
  97. p:nth-child(3) a:hover{    
  98.   -webkit-animation: neon3 1.5s ease-in-out infinite alternate;   
  99.   -moz-animation: neon3 1.5s ease-in-out infinite alternate;   
  100.   animation: neon3 1.5s ease-in-out infinite alternate;    
  101. }   
  102.   
  103. p:nth-child(4) a{   
  104.   color:#B6FF00;   
  105.   font-family:PressStart;   
  106.   font-size:0.8em;   
  107. }   
  108. p:nth-child(4) a:hover{   
  109.   -webkit-animation: neon4 1.5s ease-in-out infinite alternate;   
  110.   -moz-animation: neon4 1.5s ease-in-out infinite alternate;   
  111.   animation: neon4 1.5s ease-in-out infinite alternate;   
  112. }   
  113.   
  114. p:nth-child(5) a{   
  115.   color:#FF9900;   
  116.   font-family:Audiowide;   
  117. }   
  118. p:nth-child(5) a:hover{   
  119.   -webkit-animation: neon5 1.5s ease-in-out infinite alternate;   
  120.   -moz-animation: neon5 1.5s ease-in-out infinite alternate;   
  121.   animation: neon5 1.5s ease-in-out infinite alternate;    
  122. }   
  123.   
  124. p:nth-child(6) a{   
  125.   color:#BA01FF;   
  126.   font-family:Vampiro One;   
  127. }   
  128. p:nth-child(6) a:hover{   
  129.   -webkit-animation: neon6 1.5s ease-in-out infinite alternate;   
  130.   -moz-animation: neon6 1.5s ease-in-out infinite alternate;   
  131.   animation: neon6 1.5s ease-in-out infinite alternate;   
  132. }   
  133.   
  134. p a:hover{   
  135. color:#ffffff;     
  136. }   
  137.   
  138. /*glow for webkit*/  
  139. @-webkit-keyframes neon1 {   
  140.   from {   
  141.     text-shadow: 0 0 10px #fff,   
  142.                0 0 20px  #fff,   
  143.                0 0 30px  #fff,   
  144.                0 0 40px  #FF1177,   
  145.                0 0 70px  #FF1177,   
  146.                0 0 80px  #FF1177,   
  147.                0 0 100px #FF1177,   
  148.                0 0 150px #FF1177;   
  149.   }   
  150.   to {   
  151.     text-shadow: 0 0 5px #fff,   
  152.                0 0 10px #fff,   
  153.                0 0 15px #fff,   
  154.                0 0 20px #FF1177,   
  155.                0 0 35px #FF1177,   
  156.                0 0 40px #FF1177,   
  157.                0 0 50px #FF1177,   
  158.                0 0 75px #FF1177;   
  159.   }   
  160. }   
  161.   
  162. @-webkit-keyframes neon2 {   
  163.   from {   
  164.     text-shadow: 0 0 10px #fff,   
  165.                0 0 20px  #fff,   
  166.                0 0 30px  #fff,   
  167.                0 0 40px  #228DFF,   
  168.                0 0 70px  #228DFF,   
  169.                0 0 80px  #228DFF,   
  170.                0 0 100px #228DFF,   
  171.                0 0 150px #228DFF;   
  172.   }   
  173.   to {   
  174.     text-shadow: 0 0 5px #fff,   
  175.                0 0 10px #fff,   
  176.                0 0 15px #fff,   
  177.                0 0 20px #228DFF,   
  178.                0 0 35px #228DFF,   
  179.                0 0 40px #228DFF,   
  180.                0 0 50px #228DFF,   
  181.                0 0 75px #228DFF;   
  182.   }   
  183. }   
  184.   
  185. @-webkit-keyframes neon3 {   
  186.   from {   
  187.     text-shadow: 0 0 10px #fff,   
  188.                0 0 20px  #fff,   
  189.                0 0 30px  #fff,   
  190.                0 0 40px  #FFDD1B,   
  191.                0 0 70px  #FFDD1B,   
  192.                0 0 80px  #FFDD1B,   
  193.                0 0 100px #FFDD1B,   
  194.                0 0 150px #FFDD1B;   
  195.   }   
  196.   to {   
  197.     text-shadow: 0 0 5px #fff,   
  198.                0 0 10px #fff,   
  199.                0 0 15px #fff,   
  200.                0 0 20px #FFDD1B,   
  201.                0 0 35px #FFDD1B,   
  202.                0 0 40px #FFDD1B,   
  203.                0 0 50px #FFDD1B,   
  204.                0 0 75px #FFDD1B;   
  205.   }   
  206. }   
  207.   
  208. @-webkit-keyframes neon4 {   
  209.   from {   
  210.     text-shadow: 0 0 10px #fff,   
  211.                0 0 20px  #fff,   
  212.                0 0 30px  #fff,   
  213.                0 0 40px  #B6FF00,   
  214.                0 0 70px  #B6FF00,   
  215.                0 0 80px  #B6FF00,   
  216.                0 0 100px #B6FF00,   
  217.                0 0 150px #B6FF00;   
  218.   }   
  219.   to {   
  220.     text-shadow: 0 0 5px #fff,   
  221.                0 0 10px #fff,   
  222.                0 0 15px #fff,   
  223.                0 0 20px #B6FF00,   
  224.                0 0 35px #B6FF00,   
  225.                0 0 40px #B6FF00,   
  226.                0 0 50px #B6FF00,   
  227.                0 0 75px #B6FF00;   
  228.   }   
  229. }   
  230.   
  231. @-webkit-keyframes neon5 {   
  232.   from {   
  233.     text-shadow: 0 0 10px #fff,   
  234.                0 0 20px  #fff,   
  235.                0 0 30px  #fff,   
  236.                0 0 40px  #FF9900,   
  237.                0 0 70px  #FF9900,   
  238.                0 0 80px  #FF9900,   
  239.                0 0 100px #FF9900,   
  240.                0 0 150px #FF9900;   
  241.   }   
  242.   to {   
  243.     text-shadow: 0 0 5px #fff,   
  244.                0 0 10px #fff,   
  245.                0 0 15px #fff,   
  246.                0 0 20px #FF9900,   
  247.                0 0 35px #FF9900,   
  248.                0 0 40px #FF9900,   
  249.                0 0 50px #FF9900,   
  250.                0 0 75px #FF9900;   
  251.   }   
  252. }   
  253.   
  254. @-webkit-keyframes neon6 {   
  255.   from {   
  256.     text-shadow: 0 0 10px #fff,   
  257.                0 0 20px #fff,   
  258.                0 0 30px #fff,   
  259.                0 0 40px #ff00de,   
  260.                0 0 70px #ff00de,   
  261.                0 0 80px #ff00de,   
  262.                0 0 100px #ff00de,   
  263.                0 0 150px #ff00de;   
  264.   }   
  265.   to {   
  266.     text-shadow: 0 0 5px #fff,   
  267.                0 0 10px #fff,   
  268.                0 0 15px #fff,   
  269.                0 0 20px #ff00de,   
  270.                0 0 35px #ff00de,   
  271.                0 0 40px #ff00de,   
  272.                0 0 50px #ff00de,   
  273.                0 0 75px #ff00de;   
  274.   }   
  275. }   
  276.   
  277. /*glow for mozilla*/  
  278. @-moz-keyframes neon1 {   
  279.   from {   
  280.     text-shadow: 0 0 10px #fff,   
  281.                0 0 20px  #fff,   
  282.                0 0 30px  #fff,   
  283.                0 0 40px  #FF1177,   
  284.                0 0 70px  #FF1177,   
  285.                0 0 80px  #FF1177,   
  286.                0 0 100px #FF1177,   
  287.                0 0 150px #FF1177;   
  288.   }   
  289.   to {   
  290.     text-shadow: 0 0 5px #fff,   
  291.                0 0 10px #fff,   
  292.                0 0 15px #fff,   
  293.                0 0 20px #FF1177,   
  294.                0 0 35px #FF1177,   
  295.                0 0 40px #FF1177,   
  296.                0 0 50px #FF1177,   
  297.                0 0 75px #FF1177;   
  298.   }   
  299. }   
  300.   
  301. @-moz-keyframes neon2 {   
  302.   from {   
  303.     text-shadow: 0 0 10px #fff,   
  304.                0 0 20px  #fff,   
  305.                0 0 30px  #fff,   
  306.                0 0 40px  #228DFF,   
  307.                0 0 70px  #228DFF,   
  308.                0 0 80px  #228DFF,   
  309.                0 0 100px #228DFF,   
  310.                0 0 150px #228DFF;   
  311.   }   
  312.   to {   
  313.     text-shadow: 0 0 5px #fff,   
  314.                0 0 10px #fff,   
  315.                0 0 15px #fff,   
  316.                0 0 20px #228DFF,   
  317.                0 0 35px #228DFF,   
  318.                0 0 40px #228DFF,   
  319.                0 0 50px #228DFF,   
  320.                0 0 75px #228DFF;   
  321.   }   
  322. }   
  323.   
  324. @-moz-keyframes neon3 {   
  325.   from {   
  326.     text-shadow: 0 0 10px #fff,   
  327.                0 0 20px  #fff,   
  328.                0 0 30px  #fff,   
  329.                0 0 40px  #FFDD1B,   
  330.                0 0 70px  #FFDD1B,   
  331.                0 0 80px  #FFDD1B,   
  332.                0 0 100px #FFDD1B,   
  333.                0 0 150px #FFDD1B;   
  334.   }   
  335.   to {   
  336.     text-shadow: 0 0 5px #fff,   
  337.                0 0 10px #fff,   
  338.                0 0 15px #fff,   
  339.                0 0 20px #FFDD1B,   
  340.                0 0 35px #FFDD1B,   
  341.                0 0 40px #FFDD1B,   
  342.                0 0 50px #FFDD1B,   
  343.                0 0 75px #FFDD1B;   
  344.   }   
  345. }   
  346.   
  347. @-moz-keyframes neon4 {   
  348.   from {   
  349.     text-shadow: 0 0 10px #fff,   
  350.                0 0 20px  #fff,   
  351.                0 0 30px  #fff,   
  352.                0 0 40px  #B6FF00,   
  353.                0 0 70px  #B6FF00,   
  354.                0 0 80px  #B6FF00,   
  355.                0 0 100px #B6FF00,   
  356.                0 0 150px #B6FF00;   
  357.   }   
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

　　利用CSS配合JavaScript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

　　想要打造并拥有一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 　　通过许多实际项目，
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间，但由于它控制参数较多，在实际应用时，为了确定一组合适的参数值，不得不反复调整修改，在编辑窗口和预览窗口来回倒腾，甚是麻烦，本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”，在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程：li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位（position）

　　使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 　　其实，要想控制好层的绝对定位，只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

　　在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。 　　相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

　　水平对齐（text-align），用以设定元素内文本的水平对齐方式。 　　1.语法 　　text-align具体参数如下： 语法：text-align:left|right|center|justify 说明：设定元素内文本的水平对齐方式。 参数：left:左
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22