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

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

所属分类： 网页制作 / CSS 阅读数： 1111
收藏 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.   }   
更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介：在这篇文章里，我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程，该课程旨在向大家提供Web设计和开发的坚实基础，无论读者是谁，此教程完全免费、可访问，并且不需要预备知识。当然，我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介：如果你挠着头想弄清楚优雅降级和渐进增强的区别，我告诉你，这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点，以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介：Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器，拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准，所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介：网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求，先在文章顶部给出链接：《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之 首先声明： 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外） 解决：写全单位如padding:0px; 2、水平居中 问题：div里的内容，ie默认为center，而ff默认left 解决：mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序，刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

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