DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS3制作炫酷的自定義發光文字
CSS3制作炫酷的自定義發光文字
編輯：布局實例     

         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. }

以上就是本文的全部內容，希望對大家的學習有所幫助。

布局實例
CSS中Font的一些基本知識點歸納總結
1、什麼是字體　　字體是文字的外在形式，就是文字的風格，是文字的外衣。比如行書、楷書、草書，都是一種
CSS中em和px的區別
Font-size:1.5em;　　其實在國外CSS編寫中，使用em作為單位是很多的，一是人性化考慮
CSS3正方體旋轉示例代碼
  效果圖：  css代碼： 　　代碼如下:　　@keyfr

相關文章

布局基本知識布局實例
小編推薦
CSS3的media query學習攻略 什麼是float閉合 文字排版在網頁制作中應遵守的原則 關於浏覽器兼容性的討論 Firefox和IE通用的三則網站重構實用技巧 行內元素、塊元素都有哪些 CSS樣式表一席談之CSS快速入門 Google浏覽器CSS居中兼容問題完美解決方法 舉例詳解CSS3中的Transition jQuery DOM操作小結與實例
熱門推薦
css絕對定位 用CSS實現表格背景顏色漸變效果 利用CSS3的transition屬性實現滑動效果 CSS代碼當前頁效果的實現 IE與Firefox的CSS兼容大全 詳解CSS中的規則聲明 CSS教程網站制作如何打造導航藍色效果 CSS兼容方案最新的一些技巧 input輸入框中有圖片怎麼使用css布局實現
大家都在看
初步了解CSS3 XML Schema幫你建模（3） js轉html實體的方法 jQuery編寫textarea輸入字數限制代碼 也說JavaScript中String類的replace函數 JavaScript_object基礎入門(必看篇) DIV+CSS常見的錯誤 用AJAX調用SOAP Web服務：構建Web服務客戶機(2)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved