本文为大家分享一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效，如果你的网络无法加载这些字体，可能是由于国外的这个网站被墙的缘故，就像google的字体库网址被屏蔽那样。
HTML代码
XML/HTML Code复制内容到剪贴板 <divid="container"> <p><ahref="#"> RED </a></p> <p><ahref="#"> BLUE </a></p> <p><ahref="#"> Yellow </a></p> <p><ahref="#"> GREEN </a></p> <p><ahref="#"> ORANGE </a></p> <p><ahref="#"> VIOLET </a></p> </div>
CSS代码
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('PacificoRegular'),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('PressStart2P'),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:'VampiroOne'; font-style:normal; font-weight:400; src:local('VampiroOne'),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:20px020px0; } a{ text-decoration:none; -webkit-transition:all0.5s; -moz-transition:all0.5s; transition:all0.5s; } p:nth-child(1)a{ color:#FF1177; font-family:Monoton; } p:nth-child(1)a:hover{ -webkit-animation:neon11.5sease-in-outinfinitealternate; -moz-animation:neon11.5sease-in-outinfinitealternate; animation:neon11.5sease-in-outinfinitealternate; } p:nth-child(2)a{ font-size:1.5em; color:#228DFF; font-family:Iceland; } p:nth-child(2)a:hover{ -webkit-animation:neon21.5sease-in-outinfinitealternate; -moz-animation:neon21.5sease-in-outinfinitealternate; animation:neon21.5sease-in-outinfinitealternate; } p:nth-child(3)a{ color:#FFDD1B; font-family:Pacifico; } p:nth-child(3)a:hover{ -webkit-animation:neon31.5sease-in-outinfinitealternate; -moz-animation:neon31.5sease-in-outinfinitealternate; animation:neon31.5sease-in-outinfinitealternate; } p:nth-child(4)a{ color:#B6FF00; font-family:PressStart; font-size:0.8em; } p:nth-child(4)a:hover{ -webkit-animation:neon41.5sease-in-outinfinitealternate; -moz-animation:neon41.5sease-in-outinfinitealternate; animation:neon41.5sease-in-outinfinitealternate; } p:nth-child(5)a{ color:#FF9900; font-family:Audiowide; } p:nth-child(5)a:hover{ -webkit-animation:neon51.5sease-in-outinfinitealternate; -moz-animation:neon51.5sease-in-outinfinitealternate; animation:neon51.5sease-in-outinfinitealternate; } p:nth-child(6)a{ color:#BA01FF; font-family:VampiroOne; } p:nth-child(6)a:hover{ -webkit-animation:neon61.5sease-in-outinfinitealternate; -moz-animation:neon61.5sease-in-outinfinitealternate; animation:neon61.5sease-in-outinfinitealternate; } pa:hover{ color:#ffffff; } /*glowforwebkit*/ @-webkit-keyframesneon1{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#FF1177, 0070px#FF1177, 0080px#FF1177, 00100px#FF1177, 00150px#FF1177; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#FF1177, 0035px#FF1177, 0040px#FF1177, 0050px#FF1177, 0075px#FF1177; } } @-webkit-keyframesneon2{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#228DFF, 0070px#228DFF, 0080px#228DFF, 00100px#228DFF, 00150px#228DFF; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#228DFF, 0035px#228DFF, 0040px#228DFF, 0050px#228DFF, 0075px#228DFF; } } @-webkit-keyframesneon3{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#FFDD1B, 0070px#FFDD1B, 0080px#FFDD1B, 00100px#FFDD1B, 00150px#FFDD1B; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#FFDD1B, 0035px#FFDD1B, 0040px#FFDD1B, 0050px#FFDD1B, 0075px#FFDD1B; } } @-webkit-keyframesneon4{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#B6FF00, 0070px#B6FF00, 0080px#B6FF00, 00100px#B6FF00, 00150px#B6FF00; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#B6FF00, 0035px#B6FF00, 0040px#B6FF00, 0050px#B6FF00, 0075px#B6FF00; } } @-webkit-keyframesneon5{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#FF9900, 0070px#FF9900, 0080px#FF9900, 00100px#FF9900, 00150px#FF9900; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#FF9900, 0035px#FF9900, 0040px#FF9900, 0050px#FF9900, 0075px#FF9900; } } @-webkit-keyframesneon6{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#ff00de, 0070px#ff00de, 0080px#ff00de, 00100px#ff00de, 00150px#ff00de; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#ff00de, 0035px#ff00de, 0040px#ff00de, 0050px#ff00de, 0075px#ff00de; } } /*glowformozilla*/ @-moz-keyframesneon1{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#FF1177, 0070px#FF1177, 0080px#FF1177, 00100px#FF1177, 00150px#FF1177; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#FF1177, 0035px#FF1177, 0040px#FF1177, 0050px#FF1177, 0075px#FF1177; } } @-moz-keyframesneon2{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#228DFF, 0070px#228DFF, 0080px#228DFF, 00100px#228DFF, 00150px#228DFF; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#228DFF, 0035px#228DFF, 0040px#228DFF, 0050px#228DFF, 0075px#228DFF; } } @-moz-keyframesneon3{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#FFDD1B, 0070px#FFDD1B, 0080px#FFDD1B, 00100px#FFDD1B, 00150px#FFDD1B; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#FFDD1B, 0035px#FFDD1B, 0040px#FFDD1B, 0050px#FFDD1B, 0075px#FFDD1B; } } @-moz-keyframesneon4{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#B6FF00, 0070px#B6FF00, 0080px#B6FF00, 00100px#B6FF00, 00150px#B6FF00; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#B6FF00, 0035px#B6FF00, 0040px#B6FF00, 0050px#B6FF00, 0075px#B6FF00; } } @-moz-keyframesneon5{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#FF9900, 0070px#FF9900, 0080px#FF9900, 00100px#FF9900, 00150px#FF9900; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#FF9900, 0035px#FF9900, 0040px#FF9900, 0050px#FF9900, 0075px#FF9900; } } @-moz-keyframesneon6{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#ff00de, 0070px#ff00de, 0080px#ff00de, 00100px#ff00de, 00150px#ff00de; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#ff00de, 0035px#ff00de, 0040px#ff00de, 0050px#ff00de, 0075px#ff00de; } } /*glow*/ @keyframesneon1{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#FF1177, 0070px#FF1177, 0080px#FF1177, 00100px#FF1177, 00150px#FF1177; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#FF1177, 0035px#FF1177, 0040px#FF1177, 0050px#FF1177, 0075px#FF1177; } } @keyframesneon2{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#228DFF, 0070px#228DFF, 0080px#228DFF, 00100px#228DFF, 00150px#228DFF; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#228DFF, 0035px#228DFF, 0040px#228DFF, 0050px#228DFF, 0075px#228DFF; } } @keyframesneon3{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#FFDD1B, 0070px#FFDD1B, 0080px#FFDD1B, 00100px#FFDD1B, 00150px#FFDD1B; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#FFDD1B, 0035px#FFDD1B, 0040px#FFDD1B, 0050px#FFDD1B, 0075px#FFDD1B; } } @keyframesneon4{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#B6FF00, 0070px#B6FF00, 0080px#B6FF00, 00100px#B6FF00, 00150px#B6FF00; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#B6FF00, 0035px#B6FF00, 0040px#B6FF00, 0050px#B6FF00, 0075px#B6FF00; } } @keyframesneon5{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#FF9900, 0070px#FF9900, 0080px#FF9900, 00100px#FF9900, 00150px#FF9900; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#FF9900, 0035px#FF9900, 0040px#FF9900, 0050px#FF9900, 0075px#FF9900; } } @keyframesneon6{ from{ text-shadow:0010px#fff, 0020px#fff, 0030px#fff, 0040px#ff00de, 0070px#ff00de, 0080px#ff00de, 00100px#ff00de, 00150px#ff00de; } to{ text-shadow:005px#fff, 0010px#fff, 0015px#fff, 0020px#ff00de, 0035px#ff00de, 0040px#ff00de, 0050px#ff00de, 0075px#ff00de; } } /*REEEEEEEEEEESPONSIVE*/ @media(max-width:650px){ #container{ width:100%; } p{ font-size:3.5em; } }
以上就是本文的全部内容，希望对大家的学习有所帮助。
【CSS3制作炫酷的自定义发光文字】相关文章：