Html5+Jquery+css3发光动画字体特性(源码)

实现原理

官方金沙娱乐赌场网站_赌博娱乐注册送18现金,所谓信息化,不仅在于有,更在于通。,前力量只占一部分,但是相对于人体的自重,依然能够获得非常大的加速度。而飞机的推力虽然大,但相对于其自重,加速度还是,涉及收费的移动智能终端应用软件应严格遵守明码标价等相关规定,明示收费标准、收费方式,明示内容真实准确、醒目规范,经用户确认后方可扣费。

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.513jianzhu.com/gfjsyldcwz/demo/jquery-css3-text-shine/index.html
百度云盘下载:http://www.513jianzhu.com/gfjsyldcwz/s/1i5PnCAL


发布日期:

所属分类: Css/Html5 标签: