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

前端技术 2023/09/02 CSS

本文为大家分享一款基于纯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.   }   
  358.   to {   
  359.     text-shadow: 0 0 5px #fff,   

本文地址：https://www.stayed.cn/item/4139

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案