A way to customize text color with CSS3 cool glowing text

This is a text based on pure CSS3 effect, when we slide the mouse over the text, the text will simulate the light animation, showing a very cool glowing screen. In addition, because of the reference to special fonts, so the entire text effect appears to have 3D stereoscopic effects, if your network can not load these fonts, it may be because the foreign site is the wall, as Google's font library URL is blocked.

Online Demo Source Download

HTML code

<p id= "Container" >  <p><a href= "#" >    RED  </a></p>  <p><a href = "#" >    BLUE  </a></p>  <p><a href= "#" >    Yellow  </a></p>  <p><a href= "#" >    GREEN  </a></p>  <p><a href= "#" >    ORANGE  </a></p>  <p><a href= "#" >    VIOLET  </a></p></p>

CSS Code

/*setup*/*{margin:0; padding:0;}  @font-face {font-family: ' Monoton ';  Font-style:normal;  font-weight:400; Src:local (' Monoton '), local (' monoton-regular '), url (http://themes.googleusercontent.com/static/fonts/monoton/v4/ Aki-lyzynhxbygheocds_w.woff) format (' Woff ');}  @font-face {font-family: ' Iceland ';  Font-style:normal;  font-weight:400; Src:local (' Iceland '), local (' iceland-regular '), url (http://themes.googleusercontent.com/static/fonts/iceland/v3/ F6lytzlhrg9bnyxrju7rsw.woff) format (' Woff ');}  @font-face {font-family: ' Pacifico ';  Font-style:normal;  font-weight:400; Src:local (' Pacifico Regular '), local (' pacifico-regular '), url (http://themes.googleusercontent.com/static/fonts/ Pacifico/v5/yunjt0r8tcvmyj_v4xsjafeszw2xoq-xsnqo47m55da.woff) format (' Woff ');}  @font-face {font-family: ' Pressstart ';  Font-style:normal;  font-weight:400; Src:local (' Press Start 2P '), local (' pressstart2p-regular '), url (http://themes.googleusercontent.com/static/fonts/ pressstart2p/v2/8lg6lx8-ntohuqnvq0e7o3dd2uuwsmbx3bop4sl_vwm.woff) format (' Woff ');}  @font-face {font-family: ' audiowide ';  Font-style:normal;  font-weight:400; Src:local (' Audiowide '), local (' audiowide-regular '), url (http://themes.googleusercontent.com/static/fonts/ Audiowide/v2/8xtytnkeyyzh481xvwfvoj8e0i7kzn-epnyo3hzu7kw.woff) format (' Woff ');}  @font-face {font-family: ' Vampiro one ';  Font-style:normal;  font-weight:400; Src:local (' Vampiro one '), local (' vampiroone-regular '), url (http://themes.googleusercontent.com/static/fonts/ Vampiroone/v3/ho2xld8ubqyba8xlxf1_nybn6udyhwbl620a-irfubk.woff) format (' Woff ');} body{background-color: #222222;} #container {Margin:auto;}  /*neeeeoooon*/p{Text-align:center;  Font-size:7em; margin:20px 0 20px 0;   }a{Text-decoration:none;  -webkit-transition:all 0.5s;  -moz-transition:all 0.5s; Transition:all 0.5s;}  P:nth-child (1) a{color: #FF1177; Font-family:monoton;}  P:nth-child (1) a:hover{-webkit-animation:neon1 1.5s ease-in-out Infinite Alternate; -moz-animatioN:neon1 1.5s ease-in-out Infinite Alternate; Animation:neon1 1.5s ease-in-out Infinite Alternate;  }p:nth-child (2) a{font-size:1.5em;  Color: #228DFF; Font-family:iceland;}  P:nth-child (2) a:hover{-webkit-animation:neon2 1.5s ease-in-out Infinite Alternate;  -moz-animation:neon2 1.5s ease-in-out Infinite Alternate; Animation:neon2 1.5s ease-in-out infinite Alternate;}  P:nth-child (3) a{color: #FFDD1B; Font-family:pacifico;}  P:nth-child (3) a:hover{-webkit-animation:neon3 1.5s ease-in-out Infinite Alternate;  -moz-animation:neon3 1.5s ease-in-out Infinite Alternate; Animation:neon3 1.5s ease-in-out Infinite Alternate;  }p:nth-child (4) a{color: #B6FF00;  Font-family:pressstart; Font-size:0.8em;}  P:nth-child (4) a:hover{-webkit-animation:neon4 1.5s ease-in-out Infinite Alternate;  -moz-animation:neon4 1.5s ease-in-out Infinite Alternate; Animation:neon4 1.5s ease-in-out infinite Alternate;}  P:nth-child (5) a{color: #FF9900; Font-family:audiowide;} P:nth-child (5) a:hover{ -webkit-animation:neon5 1.5s ease-in-out Infinite Alternate;  -moz-animation:neon5 1.5s ease-in-out Infinite Alternate; Animation:neon5 1.5s ease-in-out Infinite Alternate;  }p:nth-child (6) a{color: #BA01FF; Font-family:vampiro one;}  P:nth-child (6) a:hover{-webkit-animation:neon6 1.5s ease-in-out Infinite Alternate;  -moz-animation:neon6 1.5s ease-in-out Infinite Alternate; Animation:neon6 1.5s ease-in-out infinite Alternate;}  P A:hover{color: #ffffff;               }/*glow for Webkit*/@-webkit-keyframes Neon1 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff,                0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177,  0 0 100px #FF1177, 0 0 150px #FF1177; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF 1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;  }}@-webkit-keyframes Neon2 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px  #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0  100px #228DFF, 0 0 150px #228DFF; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #22 8DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75  PX #228DFF;  }}@-webkit-keyframes Neon3 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px  #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0  100px #FFDD1B, 0 0 150px #FFDD1B; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px#FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0  75px #FFDD1B;  }}@-webkit-keyframes Neon4 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px  #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0  100px #B6FF00, 0 0 150px #B6FF00; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6 FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75  PX #B6FF00;  }}@-webkit-keyframes Neon5 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px  #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0  100px #FF9900, 0 0 150px #FF9900; } to {Text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900,  0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; }}@-webkit-keyframes Neon6 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f FF, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100p  X #ff00de, 0 0 150px #ff00de; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff 00DE, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75  PX #ff00de;               }}/*glow for Mozilla*/@-moz-keyframes Neon1 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff,    0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177,           0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF 1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75  PX #FF1177; }}@-moz-keyframes Neon2 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff F, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 10  0px #228DFF, 0 0 150px #228DFF; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #22 8DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75  PX #228DFF;    }}@-moz-keyframes Neon3 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff,           0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD  1 B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF DD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75  PX #FFDD1B; }}@-moz-keyframes Neon4 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff F, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 10  0px #B6FF00, 0 0 150px #B6FF00; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6 FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75  PX #B6FF00; }}@-moz-keyframes Neon5 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100p  X #FF9900, 0 0 150px #FF9900; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF 9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75  PX #FF9900;                }}@-moz-keyframes Neon6 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #  FF00DE, 0 0 150px #ff00de; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff         00DE, 0 0 35px #ff00de,      0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;  }}/*glow*/@keyframes Neon1 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px  #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0  100px #FF1177, 0 0 150px #FF1177; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF 1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75  PX #FF1177;               }} @keyframes Neon2 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #  228DFF, 0 0 150px #228DFF;        } to {text-shadow:0 0 5px #fff, 0 0 10px #fff,       0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF,  0 0 50px #228DFF, 0 0 75px #228DFF;               }} @keyframes Neon3 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #  FFDD1B, 0 0 150px #FFDD1B; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF DD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75  PX #FFDD1B;               }} @keyframes Neon4 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px # B6FF00, 0 0 150px #B6FF00; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6 FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75  PX #B6FF00;               }} @keyframes Neon5 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #  FF9900, 0 0 150px #FF9900; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF 9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75  PX #FF9900;               }} @keyframes Neon6 {from {text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,       0 0 40px #ff00de, 0 0 70px #ff00de,        0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to {text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff 00DE, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75  PX #ff00de;  }}/*reeeeeeeeeeesponsive*/@media (max-width:650px) {#container {width:100%;  } p{font-size:3.5em; }}