Html5+Jquery+css3发光动画字体特性（源码）

实现原理

1、加载了谷歌的漂亮的公共字体库。
2、加载jquery-1.11.0.min.js
3、设置css3动画特性。

511遇见

Html结构 

  1. <div class="zzsc-content">
  2. 	<div class="first_neon">Enjoy NEON</div>
  3. 	<div class="second_neon">Enjoy NEON</div>
  4. 	<div class="third_neon">Enjoy NEON</div>
  5. </div>

css代码 

  1. .first_neon {
  2.     background: none repeat scroll 0 0 #000000;
  3.     border: 1px solid;
  4.     border-radius: 15px;
  5.     color: #FFFFFF;
  6.     cursor: pointer;
  7.     float: left;
  8.     font-family:"Warnes";
  9.     margin: auto;
  10.     padding: 26px 10px;
  11.     text-align: center;
  12.     text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE;
  13.     transition: text-shadow 0.5s ease 0s;
  14.     width: 250px;
  15. }
  16.  
  17. .first_neon:hover {
  18.     text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #00FFFF, 0 0 70px #00FFFF, 0 0 80px #00FFFF, 0 0 100px #00FFFF;
  19. }
  20.  
  21. .second_neon {
  22.     border: 1px solid;
  23.     border-radius: 10px;
  24.     color: #FFFFFF;
  25.     cursor: pointer;
  26.     display: table-cell;
  27.     float: left;
  28.     font-family:"Zeyada";
  29.     margin-left: 20px;
  30. 	transition: text-shadow 0.5s ease 0s;
  31.     padding: 45px 25px;
  32.     text-align: center;
  33.     text-shadow: 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #008000, 0 0 70px #008000, 0 0 80px #008000, 0 0 100px #008000;
  34.     width: 250px;
  35. }
  36. .second_neon:hover {
  37.     text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FFFF00, 0 0 70px #FFFF00, 0 0 80px #FFFF00, 0 0 100px #FFFF00;
  38. }
  39. .third_neon {
  40.     border: 1px solid;
  41.     border-radius: 10px;
  42.     color: #FFFFFF;
  43.     cursor: pointer;
  44.     display: table-cell;
  45.     float: left;
  46.     font-family:"Princess Sofia";
  47.     margin-left: 20px;
  48. 	transition: text-shadow 0.5s ease 0s;
  49. 	padding: 13px 25px;
  50.     text-align: center;
  51.     text-shadow: 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #00FFFF, 0 0 70px #00FFFF, 0 0 80px #00FFFF, 0 0 100px #00FFFF;
  52.     width: 250px;
  53. }
  54.  
  55. .third_neon:hover {
  56.     text-shadow: 0 0 6px #FFFFFF, 0 0 15px #FFFFFF, 0 0 25px #FFFFFF, 0 0 40px #7FFF00, 0 0 70px #7FFF00, 0 0 80px #7FFF00, 0 0 100px #7FFF00;
  57. }

在线预览和源码下载

在线预览地址：http://www.html5tricks.com/demo/jquery-css3-text-shine/index.html
百度云盘下载：http://pan.baidu.com/s/1i5PnCAL

发布日期： 作者： 511遇见

所属分类： Css/Html5 标签： 　　

没有相关文章!

相关文章: