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

网络
秋天的人们是勤劳的。人们忙着摘果实、收稻谷，脸上挂满了丰收的喜悦。

本文为大家分享一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效，如果你的网络无法加载这些字体，可能是由于国外的这个网站被墙的缘故，就像google的字体库网址被屏蔽那样。

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <divid="container">
  3. <p><arel="nofollow noopener noreferrer" href="#">
  4. RED
  5. </a></p>
  7. <p><arel="nofollow noopener noreferrer" href="#">
  8. BLUE
  9. </a></p>
  11. <p><arel="nofollow noopener noreferrer" href="#">
  12. Yellow
  13. </a></p>
  15. <p><arel="nofollow noopener noreferrer" href="#">
  16. GREEN
  17. </a></p>
  19. <p><arel="nofollow noopener noreferrer" href="#">
  20. ORANGE
  21. </a></p>
  23. <p><arel="nofollow noopener noreferrer" href="#">
  24. VIOLET
  25. </a></p>
  27. </div>

CSS代码

CSS Code复制内容到剪贴板
  1. /*setup*/
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  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. }
  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. }
  21. @font-face{
  22. font-family:'Pacifico';
  23. font-style:normal;
  24. font-weight:400;
  25. src:local('PacificoRegular'),local('Pacifico-Regular'),url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff)format('woff');
  26. }
  28. @font-face{
  29. font-family:'PressStart';
  30. font-style:normal;
  31. font-weight:400;
  32. src:local('PressStart2P'),local('PressStart2P-Regular'),url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff)format('woff');
  33. }
  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. }
  42. @font-face{
  43. font-family:'VampiroOne';
  44. font-style:normal;
  45. font-weight:400;
  46. src:local('VampiroOne'),local('VampiroOne-Regular'),url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff)format('woff');
  47. }
  49. body{
  50. background-color:#222222;
  51. }
  53. #container{
  55. margin:auto;
  56. }
  58. /*neeeeoooon*/
  59. p{
  60. text-align:center;
  61. font-size:7em;
  62. margin:20px020px0;
  63. }
  65. a{
  66. text-decoration:none;
  67. -webkit-transition:all0.5s;
  68. -moz-transition:all0.5s;
  69. transition:all0.5s;
  70. }
  72. p:nth-child(1)a{
  73. color:#FF1177;
  74. font-family:Monoton;
  75. }
  76. p:nth-child(1)a:hover{
  77. -webkit-animation:neon11.5sease-in-outinfinitealternate;
  78. -moz-animation:neon11.5sease-in-outinfinitealternate;
  79. animation:neon11.5sease-in-outinfinitealternate;
  80. }
  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:neon21.5sease-in-outinfinitealternate;
  89. -moz-animation:neon21.5sease-in-outinfinitealternate;
  90. animation:neon21.5sease-in-outinfinitealternate;
  91. }
  93. p:nth-child(3)a{
  94. color:#FFDD1B;
  95. font-family:Pacifico;
  96. }
  97. p:nth-child(3)a:hover{
  98. -webkit-animation:neon31.5sease-in-outinfinitealternate;
  99. -moz-animation:neon31.5sease-in-outinfinitealternate;
  100. animation:neon31.5sease-in-outinfinitealternate;
  101. }
  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:neon41.5sease-in-outinfinitealternate;
  110. -moz-animation:neon41.5sease-in-outinfinitealternate;
  111. animation:neon41.5sease-in-outinfinitealternate;
  112. }
  114. p:nth-child(5)a{
  115. color:#FF9900;
  116. font-family:Audiowide;
  117. }
  118. p:nth-child(5)a:hover{
  119. -webkit-animation:neon51.5sease-in-outinfinitealternate;
  120. -moz-animation:neon51.5sease-in-outinfinitealternate;
  121. animation:neon51.5sease-in-outinfinitealternate;
  122. }
  124. p:nth-child(6)a{
  125. color:#BA01FF;
  126. font-family:VampiroOne;
  127. }
  128. p:nth-child(6)a:hover{
  129. -webkit-animation:neon61.5sease-in-outinfinitealternate;
  130. -moz-animation:neon61.5sease-in-outinfinitealternate;
  131. animation:neon61.5sease-in-outinfinitealternate;
  132. }
  134. pa:hover{
  135. color:#ffffff;
  136. }
  138. /*glowforwebkit*/
  139. @-webkit-keyframesneon1{
  140. from{
  141. text-shadow:0010px#fff,
  142. 0020px#fff,
  143. 0030px#fff,
  144. 0040px#FF1177,
  145. 0070px#FF1177,
  146. 0080px#FF1177,
  147. 00100px#FF1177,
  148. 00150px#FF1177;
  149. }
  150. to{
  151. text-shadow:005px#fff,
  152. 0010px#fff,
  153. 0015px#fff,
  154. 0020px#FF1177,
  155. 0035px#FF1177,
  156. 0040px#FF1177,
  157. 0050px#FF1177,
  158. 0075px#FF1177;
  159. }
  160. }
  162. @-webkit-keyframesneon2{
  163. from{
  164. text-shadow:0010px#fff,
  165. 0020px#fff,
  166. 0030px#fff,
  167. 0040px#228DFF,
  168. 0070px#228DFF,
  169. 0080px#228DFF,
  170. 00100px#228DFF,
  171. 00150px#228DFF;
  172. }
  173. to{
  174. text-shadow:005px#fff,
  175. 0010px#fff,
  176. 0015px#fff,
  177. 0020px#228DFF,
  178. 0035px#228DFF,
  179. 0040px#228DFF,
  180. 0050px#228DFF,
  181. 0075px#228DFF;
  182. }
  183. }
  185. @-webkit-keyframesneon3{
  186. from{
  187. text-shadow:0010px#fff,
  188. 0020px#fff,
  189. 0030px#fff,
  190. 0040px#FFDD1B,
  191. 0070px#FFDD1B,
  192. 0080px#FFDD1B,
  193. 00100px#FFDD1B,
  194. 00150px#FFDD1B;
  195. }
  196. to{
  197. text-shadow:005px#fff,
  198. 0010px#fff,
  199. 0015px#fff,
  200. 0020px#FFDD1B,
  201. 0035px#FFDD1B,
  202. 0040px#FFDD1B,
  203. 0050px#FFDD1B,
  204. 0075px#FFDD1B;
  205. }
  206. }
  208. @-webkit-keyframesneon4{
  209. from{
  210. text-shadow:0010px#fff,
  211. 0020px#fff,
  212. 0030px#fff,
  213. 0040px#B6FF00,
  214. 0070px#B6FF00,
  215. 0080px#B6FF00,
  216. 00100px#B6FF00,
  217. 00150px#B6FF00;
  218. }
  219. to{
  220. text-shadow:005px#fff,
  221. 0010px#fff,
  222. 0015px#fff,
  223. 0020px#B6FF00,
  224. 0035px#B6FF00,
  225. 0040px#B6FF00,
  226. 0050px#B6FF00,
  227. 0075px#B6FF00;
  228. }
  229. }
  231. @-webkit-keyframesneon5{
  232. from{
  233. text-shadow:0010px#fff,
  234. 0020px#fff,
  235. 0030px#fff,
  236. 0040px#FF9900,
  237. 0070px#FF9900,
  238. 0080px#FF9900,
  239. 00100px#FF9900,
  240. 00150px#FF9900;
  241. }
  242. to{
  243. text-shadow:005px#fff,
  244. 0010px#fff,
  245. 0015px#fff,
  246. 0020px#FF9900,
  247. 0035px#FF9900,
  248. 0040px#FF9900,
  249. 0050px#FF9900,
  250. 0075px#FF9900;
  251. }
  252. }
  254. @-webkit-keyframesneon6{
  255. from{
  256. text-shadow:0010px#fff,
  257. 0020px#fff,
  258. 0030px#fff,
  259. 0040px#ff00de,
  260. 0070px#ff00de,
  261. 0080px#ff00de,
  262. 00100px#ff00de,
  263. 00150px#ff00de;
  264. }
  265. to{
  266. text-shadow:005px#fff,
  267. 0010px#fff,
  268. 0015px#fff,
  269. 0020px#ff00de,
  270. 0035px#ff00de,
  271. 0040px#ff00de,
  272. 0050px#ff00de,
  273. 0075px#ff00de;
  274. }
  275. }
  277. /*glowformozilla*/
  278. @-moz-keyframesneon1{
  279. from{
  280. text-shadow:0010px#fff,
  281. 0020px#fff,
  282. 0030px#fff,
  283. 0040px#FF1177,
  284. 0070px#FF1177,
  285. 0080px#FF1177,
  286. 00100px#FF1177,
  287. 00150px#FF1177;
  288. }
  289. to{
  290. text-shadow:005px#fff,
  291. 0010px#fff,
  292. 0015px#fff,
  293. 0020px#FF1177,
  294. 0035px#FF1177,
  295. 0040px#FF1177,
  296. 0050px#FF1177,
  297. 0075px#FF1177;
  298. }
  299. }
  301. @-moz-keyframesneon2{
  302. from{
  303. text-shadow:0010px#fff,
  304. 0020px#fff,
  305. 0030px#fff,
  306. 0040px#228DFF,
  307. 0070px#228DFF,
  308. 0080px#228DFF,
  309. 00100px#228DFF,
  310. 00150px#228DFF;
  311. }
  312. to{
  313. text-shadow:005px#fff,
  314. 0010px#fff,
  315. 0015px#fff,
  316. 0020px#228DFF,
  317. 0035px#228DFF,
  318. 0040px#228DFF,
  319. 0050px#228DFF,
  320. 0075px#228DFF;
  321. }
  322. }
  324. @-moz-keyframesneon3{
  325. from{
  326. text-shadow:0010px#fff,
  327. 0020px#fff,
  328. 0030px#fff,
  329. 0040px#FFDD1B,
  330. 0070px#FFDD1B,
  331. 0080px#FFDD1B,
  332. 00100px#FFDD1B,
  333. 00150px#FFDD1B;
  334. }
  335. to{
  336. text-shadow:005px#fff,
  337. 0010px#fff,
  338. 0015px#fff,
  339. 0020px#FFDD1B,
  340. 0035px#FFDD1B,
  341. 0040px#FFDD1B,
  342. 0050px#FFDD1B,
  343. 0075px#FFDD1B;
  344. }
  345. }
  347. @-moz-keyframesneon4{
  348. from{
  349. text-shadow:0010px#fff,
  350. 0020px#fff,
  351. 0030px#fff,
  352. 0040px#B6FF00,
  353. 0070px#B6FF00,
  354. 0080px#B6FF00,
  355. 00100px#B6FF00,
  356. 00150px#B6FF00;
  357. }
  358. to{
  359. text-shadow:005px#fff,
  360. 0010px#fff,
  361. 0015px#fff,
  362. 0020px#B6FF00,
  363. 0035px#B6FF00,
  364. 0040px#B6FF00,
  365. 0050px#B6FF00,
  366. 0075px#B6FF00;
  367. }
  368. }
  370. @-moz-keyframesneon5{
  371. from{
  372. text-shadow:0010px#fff,
  373. 0020px#fff,
  374. 0030px#fff,
  375. 0040px#FF9900,
  376. 0070px#FF9900,
  377. 0080px#FF9900,
  378. 00100px#FF9900,
  379. 00150px#FF9900;
  380. }
  381. to{
  382. text-shadow:005px#fff,
  383. 0010px#fff,
  384. 0015px#fff,
  385. 0020px#FF9900,
  386. 0035px#FF9900,
  387. 0040px#FF9900,
  388. 0050px#FF9900,
  389. 0075px#FF9900;
  390. }
  391. }
  393. @-moz-keyframesneon6{
  394. from{
  395. text-shadow:0010px#fff,
  396. 0020px#fff,
  397. 0030px#fff,
  398. 0040px#ff00de,
  399. 0070px#ff00de,
  400. 0080px#ff00de,
  401. 00100px#ff00de,
  402. 00150px#ff00de;
  403. }
  404. to{
  405. text-shadow:005px#fff,
  406. 0010px#fff,
  407. 0015px#fff,
  408. 0020px#ff00de,
  409. 0035px#ff00de,
  410. 0040px#ff00de,
  411. 0050px#ff00de,
  412. 0075px#ff00de;
  413. }
  414. }
  416. /*glow*/
  417. @keyframesneon1{
  418. from{
  419. text-shadow:0010px#fff,
  420. 0020px#fff,
  421. 0030px#fff,
  422. 0040px#FF1177,
  423. 0070px#FF1177,
  424. 0080px#FF1177,
  425. 00100px#FF1177,
  426. 00150px#FF1177;
  427. }
  428. to{
  429. text-shadow:005px#fff,
  430. 0010px#fff,
  431. 0015px#fff,
  432. 0020px#FF1177,
  433. 0035px#FF1177,
  434. 0040px#FF1177,
  435. 0050px#FF1177,
  436. 0075px#FF1177;
  437. }
  438. }
  440. @keyframesneon2{
  441. from{
  442. text-shadow:0010px#fff,
  443. 0020px#fff,
  444. 0030px#fff,
  445. 0040px#228DFF,
  446. 0070px#228DFF,
  447. 0080px#228DFF,
  448. 00100px#228DFF,
  449. 00150px#228DFF;
  450. }
  451. to{
  452. text-shadow:005px#fff,
  453. 0010px#fff,
  454. 0015px#fff,
  455. 0020px#228DFF,
  456. 0035px#228DFF,
  457. 0040px#228DFF,
  458. 0050px#228DFF,
  459. 0075px#228DFF;
  460. }
  461. }
  463. @keyframesneon3{
  464. from{
  465. text-shadow:0010px#fff,
  466. 0020px#fff,
  467. 0030px#fff,
  468. 0040px#FFDD1B,
  469. 0070px#FFDD1B,
  470. 0080px#FFDD1B,
  471. 00100px#FFDD1B,
  472. 00150px#FFDD1B;
  473. }
  474. to{
  475. text-shadow:005px#fff,
  476. 0010px#fff,
  477. 0015px#fff,
  478. 0020px#FFDD1B,
  479. 0035px#FFDD1B,
  480. 0040px#FFDD1B,
  481. 0050px#FFDD1B,
  482. 0075px#FFDD1B;
  483. }
  484. }
  486. @keyframesneon4{
  487. from{
  488. text-shadow:0010px#fff,
  489. 0020px#fff,
  490. 0030px#fff,
  491. 0040px#B6FF00,
  492. 0070px#B6FF00,
  493. 0080px#B6FF00,
  494. 00100px#B6FF00,
  495. 00150px#B6FF00;
  496. }
  497. to{
  498. text-shadow:005px#fff,
  499. 0010px#fff,
  500. 0015px#fff,
  501. 0020px#B6FF00,
  502. 0035px#B6FF00,
  503. 0040px#B6FF00,
  504. 0050px#B6FF00,
  505. 0075px#B6FF00;
  506. }
  507. }
  509. @keyframesneon5{
  510. from{
  511. text-shadow:0010px#fff,
  512. 0020px#fff,
  513. 0030px#fff,
  514. 0040px#FF9900,
  515. 0070px#FF9900,
  516. 0080px#FF9900,
  517. 00100px#FF9900,
  518. 00150px#FF9900;
  519. }
  520. to{
  521. text-shadow:005px#fff,
  522. 0010px#fff,
  523. 0015px#fff,
  524. 0020px#FF9900,
  525. 0035px#FF9900,
  526. 0040px#FF9900,
  527. 0050px#FF9900,
  528. 0075px#FF9900;
  529. }
  530. }
  532. @keyframesneon6{
  533. from{
  534. text-shadow:0010px#fff,
  535. 0020px#fff,
  536. 0030px#fff,
  537. 0040px#ff00de,
  538. 0070px#ff00de,
  539. 0080px#ff00de,
  540. 00100px#ff00de,
  541. 00150px#ff00de;
  542. }
  543. to{
  544. text-shadow:005px#fff,
  545. 0010px#fff,
  546. 0015px#fff,
  547. 0020px#ff00de,
  548. 0035px#ff00de,
  549. 0040px#ff00de,
  550. 0050px#ff00de,
  551. 0075px#ff00de;
  552. }
  553. }
  555. /*REEEEEEEEEEESPONSIVE*/
  556. @media(max-width:650px){
  558. #container{
  559. width:100%;
  560. }
  562. p{
  563. font-size:3.5em;
  564. }
  566. }

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例