CSS3制作炫酷的自定义发光文字_Div+Css教程_三联

Posted web前端网页设计

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3制作炫酷的自定义发光文字_Div+Css教程_三联相关的知识，希望对你有一定的参考价值。

       


点击上方「web前端网页设计」一键关注，更多网页设计 UI设计 html div css HTML5+CSS3、javascript、JQuery，php、mysql、帝国CMS建站教程尽在掌握。

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

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

标签:

以上是关于CSS3制作炫酷的自定义发光文字_Div+Css教程_三联的主要内容，如果未能解决你的问题，请参考以下文章

CSS3炫酷的动画制作技巧—缩放和旋转

肝了一宿才收集的48个超炫酷的 CSS 文字特效，绝对值得收藏！！！

如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

纯CSS3做炫酷环形星星发光动画，在简单没思路你也做不出来

HTML5+CSS3小实例：炫彩的发光字特效

带你玩转炫酷的CSS3