主页 / 建站知识 /

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

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

本文为大家分享一款基于纯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./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./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./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./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./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./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,   
  360.                0 0 10px #fff,   
  361.                0 0 15px #fff,   
  362.                0 0 20px #B6FF00,   
  363.                0 0 35px #B6FF00,   
  364.                0 0 40px #B6FF00,   
  365.                0 0 50px #B6FF00,   
  366.                0 0 75px #B6FF00;   
  367.   }   
  368. }   
  369.   
  370. @-moz-keyframes neon5 {   
  371.   from {   
  372.     text-shadow: 0 0 10px #fff,   
  373.                0 0 20px  #fff,   
  374.                0 0 30px  #fff,   
  375.                0 0 40px  #FF9900,   
  376.                0 0 70px  #FF9900,   
  377.                0 0 80px  #FF9900,   
  378.                0 0 100px #FF9900,   
  379.                0 0 150px #FF9900;   
  380.   }   
  381.   to {   
  382.     text-shadow: 0 0 5px #fff,   
  383.                0 0 10px #fff,   
  384.                0 0 15px #fff,   
  385.                0 0 20px #FF9900,   
  386.                0 0 35px #FF9900,   
  387.                0 0 40px #FF9900,   
  388.                0 0 50px #FF9900,   
  389.                0 0 75px #FF9900;   
  390.   }   
  391. }   
  392.   
  393. @-moz-keyframes neon6 {   
  394.   from {   
  395.     text-shadow: 0 0 10px #fff,   
  396.                0 0 20px #fff,   
  397.                0 0 30px #fff,   
  398.                0 0 40px #ff00de,   
  399.                0 0 70px #ff00de,   
  400.                0 0 80px #ff00de,   
  401.                0 0 100px #ff00de,   
  402.                0 0 150px #ff00de;   
  403.   }   
  404.   to {   
  405.     text-shadow: 0 0 5px #fff,   
  406.                0 0 10px #fff,   
  407.                0 0 15px #fff,   
  408.                0 0 20px #ff00de,   
  409.                0 0 35px #ff00de,   
  410.                0 0 40px #ff00de,   
  411.                0 0 50px #ff00de,   
  412.                0 0 75px #ff00de;   
  413.   }   
  414. }   
  415.   
  416. /glow/  
  417. @keyframes neon1 {   
  418.   from {   
  419.     text-shadow: 0 0 10px #fff,   
  420.                0 0 20px  #fff,   
  421.                0 0 30px  #fff,   
  422.                0 0 40px  #FF1177,   
  423.                0 0 70px  #FF1177,   
  424.                0 0 80px  #FF1177,   
  425.                0 0 100px #FF1177,   
  426.                0 0 150px #FF1177;   
  427.   }   
  428.   to {   
  429.     text-shadow: 0 0 5px #fff,   
  430.                0 0 10px #fff,   
  431.                0 0 15px #fff,   
  432.                0 0 20px #FF1177,   
  433.                0 0 35px #FF1177,   
  434.                0 0 40px #FF1177,   
  435.                0 0 50px #FF1177,   
  436.                0 0 75px #FF1177;   
  437.   }   
  438. }   
  439.   
  440. @keyframes neon2 {   
  441.   from {   
  442.     text-shadow: 0 0 10px #fff,   
  443.                0 0 20px  #fff,   
  444.                0 0 30px  #fff,   
  445.                0 0 40px  #228DFF,   
  446.                0 0 70px  #228DFF,   
  447.                0 0 80px  #228DFF,   
  448.                0 0 100px #228DFF,   
  449.                0 0 150px #228DFF;   
  450.   }   
  451.   to {   
  452.     text-shadow: 0 0 5px #fff,   
  453.                0 0 10px #fff,   
  454.                0 0 15px #fff,   
  455.                0 0 20px #228DFF,   
  456.                0 0 35px #228DFF,   
  457.                0 0 40px #228DFF,   
  458.                0 0 50px #228DFF,   
  459.                0 0 75px #228DFF;   
  460.   }   
  461. }   
  462.   
  463. @keyframes neon3 {   
  464.   from {   
  465.     text-shadow: 0 0 10px #fff,   
  466.                0 0 20px  #fff,   
  467.                0 0 30px  #fff,   
  468.                0 0 40px  #FFDD1B,   
  469.                0 0 70px  #FFDD1B,   
  470.                0 0 80px  #FFDD1B,   
  471.                0 0 100px #FFDD1B,   
  472.                0 0 150px #FFDD1B;   
  473.   }   
  474.   to {   
  475.     text-shadow: 0 0 5px #fff,   
  476.                0 0 10px #fff,   
  477.                0 0 15px #fff,   
  478.                0 0 20px #FFDD1B,   
  479.                0 0 35px #FFDD1B,   
  480.                0 0 40px #FFDD1B,   
  481.                0 0 50px #FFDD1B,   
  482.                0 0 75px #FFDD1B;   
  483.   }   
  484. }   
  485.   
  486. @keyframes neon4 {   
  487.   from {   
  488.     text-shadow: 0 0 10px #fff,   
  489.                0 0 20px  #fff,   
  490.                0 0 30px  #fff,   
  491.                0 0 40px  #B6FF00,   
  492.                0 0 70px  #B6FF00,   
  493.                0 0 80px  #B6FF00,   
  494.                0 0 100px #B6FF00,   
  495.                0 0 150px #B6FF00;   
  496.   }   
  497.   to {   
  498.     text-shadow: 0 0 5px #fff,   
  499.                0 0 10px #fff,   
  500.                0 0 15px #fff,   
  501.                0 0 20px #B6FF00,   
  502.                0 0 35px #B6FF00,   
  503.                0 0 40px #B6FF00,   
  504.                0 0 50px #B6FF00,   
  505.                0 0 75px #B6FF00;   
  506.   }   
  507. }   
  508.   
  509. @keyframes neon5 {   
  510.   from {   
  511.     text-shadow: 0 0 10px #fff,   
  512.                0 0 20px  #fff,   
  513.                0 0 30px  #fff,   
  514.                0 0 40px  #FF9900,   
  515.                0 0 70px  #FF9900,   
  516.                0 0 80px  #FF9900,   
  517.                0 0 100px #FF9900,   
  518.                0 0 150px #FF9900;   
  519.   }   
  520.   to {   
  521.     text-shadow: 0 0 5px #fff,   
  522.                0 0 10px #fff,   
  523.                0 0 15px #fff,   
  524.                0 0 20px #FF9900,   
  525.                0 0 35px #FF9900,   
  526.                0 0 40px #FF9900,   
  527.                0 0 50px #FF9900,   
  528.                0 0 75px #FF9900;   
  529.   }   
  530. }   
  531.   
  532. @keyframes neon6 {   
  533.   from {   
  534.     text-shadow: 0 0 10px #fff,   
  535.                0 0 20px #fff,   
  536.                0 0 30px #fff,   
  537.                0 0 40px #ff00de,   
  538.                0 0 70px #ff00de,   
  539.                0 0 80px #ff00de,   
  540.                0 0 100px #ff00de,   
  541.                0 0 150px #ff00de;   
  542.   }   
  543.   to {   
  544.     text-shadow: 0 0 5px #fff,   
  545.                0 0 10px #fff,   
  546.                0 0 15px #fff,   
  547.                0 0 20px #ff00de,   
  548.                0 0 35px #ff00de,   
  549.                0 0 40px #ff00de,   
  550.                0 0 50px #ff00de,   
  551.                0 0 75px #ff00de;   
  552.   }   
  553. }   
  554.   
  555. /REEEEEEEEEEESPONSIVE/  
  556. @media (max-width: 650px) {   
  557.   
  558.   #container{   
  559.     width: 100%;   
  560.   }   
  561.   
  562.   p{   
  563.     font-size:3.5em;   
  564.   }   
  565.   
  566. }   

以上就是本文的全部内容，希望对大家的学习有所帮助。

上一篇：使用CSS媒体查询创建响应式布局教程 下一篇：CSS display属性的table表格布局

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by