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

2016-03-293lian8 的分享

         CSS3制作炫酷的自定义发光文字。本文为大家分享一款基于纯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,
  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. }

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

分享网友

昵称:3lian8TA的收藏