HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 HTML5教程 查看内容

一款带有发光动画的HTML5表单

2012-7-10 10:02| 发布者: html5cn| 查看: 28775| 评论: 25|原作者: yanny

摘要: 今天给大家秀一款带有发光动画的HTML5表单,挺酷的,效果图如下: 当表单获取焦点时,表单四周就会呈现出发光动画的效果,并不断地进行颜色渐变;当表单失去焦点时,停止发光。其中颜色渐变的动画只有基于web ...
       今天给大家秀一款带有发光动画的HTML5表单,挺酷的,效果图如下:

20120130194719_3455.jpg



       当表单获取焦点时,表单四周就会呈现出发光动画的效果,并不断地进行颜色渐变;当表单失去焦点时,停止发光。其中颜色渐变的动画只有基于webkit的浏览器才有效果,比如chrome和safari。下面简单贴一下实现这个发光HTML5表单的CSS代码和HTML代码,如果你喜欢可以将它分享给你的朋友。

       HTML代码如下:

  1. <div class="rain">
  2.     <div class="border start">
  3.         <form>
  4.             <label for="email">Email</label>
  5.             <input name="email" type="text" placeholder="Email"/>
  6.             <label for="pass">Password</label>
  7.             <input name="pass" type="password" placeholder="Password"/>
  8.                         <input type="submit" value="LOG IN"/>
  9.         </form>
  10.     </div>
  11. </div>
复制代码

       CSS代码如下:

  1. <style>
  2.     body{
  3.         background: #000;
  4.         color: #DDD;
  5.         font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
  6.     }
  7.     .border,
  8.     .rain{
  9.         height: 170px;
  10.         width: 320px;
  11.     }
  12.     /* Layout with mask */
  13.     .rain{
  14.          padding: 10px 12px 12px 10px;
  15.          -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
  16.          -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
  17.          box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
  18.          margin: 100px auto;
  19.     }
  20.     /* Artifical "border" to clear border to bypass mask */
  21.     .border{
  22.         padding: 1px;
  23.         -moz-border-radius: 5px;
  24.         -webkit-border-radius: 5px;
  25.         border-radius: 5px;
  26.     }

  27.     .border,
  28.     .rain,
  29.     .border.start,
  30.     .rain.start{
  31.         background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
  32.         background-position: 0 0, 0 0, 0 0, 0 0;
  33.         /* Blue-ish Green Fallback for Mozilla */
  34.         background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
  35.         /* Add "Highlight" Texture to the Animation */
  36.         background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
  37.         /* Starting Color */
  38.         background-color: #39f;
  39.         /* Just do something for IE-suck */
  40.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
  41.     }
  42.      
  43.     /* Non-keyframe fallback animation */
  44.     .border.end,
  45.     .rain.end{
  46.         -moz-transition-property: background-position;  
  47.         -moz-transition-duration: 30s;
  48.         -moz-transition-timing-function: linear;
  49.         -webkit-transition-property: background-position;  
  50.         -webkit-transition-duration: 30s;  
  51.         -webkit-transition-timing-function: linear;
  52.         -o-transition-property: background-position;  
  53.         -o-transition-duration: 30s;  
  54.         -o-transition-timing-function: linear;
  55.         transition-property: background-position;  
  56.         transition-duration: 30s;  
  57.         transition-timing-function: linear;
  58.         background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;   
  59.     }
  60.      
  61.     /* Keyfram-licious animation */
  62.     @-webkit-keyframes colors {
  63.         0% {background-color: #39f;}
  64.         15% {background-color: #F246C9;}
  65.         30% {background-color: #4453F2;}
  66.         45% {background-color: #44F262;}
  67.         60% {background-color: #F257D4;}
  68.         75% {background-color: #EDF255;}
  69.         90% {background-color: #F20006;}
  70.         100% {background-color: #39f;}
  71.     }
  72.     .border,.rain{
  73.         -webkit-animation-direction: normal;
  74.         -webkit-animation-duration: 20s;
  75.         -webkit-animation-iteration-count: infinite;
  76.         -webkit-animation-name: colors;
  77.         -webkit-animation-timing-function: ease;
  78.     }
  79.      
  80.     /* In-Active State Style */
  81.     .border.unfocus{
  82.         background: #333 !important;   
  83.          -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
  84.          -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
  85.          box-shadow: 0px 0px 15px rgba(255,255,255,.2);
  86.          -webkit-animation-name: none;
  87.     }
  88.     .rain.unfocus{
  89.         background: #000 !important;   
  90.         -webkit-animation-name: none;
  91.     }
  92.      
  93.     /* Regular Form Styles */
  94.     form{
  95.         background: #212121;
  96.         -moz-border-radius: 5px;
  97.         -webkit-border-radius: 5px;
  98.         border-radius: 5px;
  99.         height: 100%;
  100.         width: 100%;
  101.         background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #242424, #090909);
  102.         background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909));
  103.     }
  104.     form label{
  105.         display: block;
  106.         padding: 10px 10px 5px 15px;
  107.         font-size: 11px;
  108.         color: #777;
  109.     }
  110.     form input{
  111.         display: block;
  112.         margin: 5px 10px 10px 15px;
  113.         width: 85%;
  114.         background: #111;
  115.         -moz-box-shadow: 0px 0px 4px #000 inset;
  116.         -webkit-box-shadow: 0px 0px 4px #000 inset;
  117.         box-shadow: 0px 0px 4px #000 inset;
  118.         outline: 1px solid #333;
  119.         border: 1px solid #000;
  120.         padding: 5px;
  121.         color: #444;
  122.         font-size: 16px;
  123.     }
  124.     form input:focus{
  125.         outline: 1px solid #555;
  126.         color: #FFF;
  127.     }
  128.     input[type="submit"]{
  129.         color: #999;
  130.         padding: 5px 10px;
  131.         float: right;
  132.         margin: 40px 0;
  133.         border: 1px solid #000;
  134.         font-weight: lighter;
  135.         -moz-border-radius: 15px;
  136.         -webkit-border-radius: 15px;
  137.         border-radius: 15px;
  138.         background: #45484d;
  139.         background: -moz-linear-gradient(top, #222 0%, #111 100%);
  140.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#111));
  141.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22222', endColorstr='#11111',GradientType=0 );
  142.         -moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
  143.         -webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
  144.         box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;
  145.         text-shadow: 0 1px 1px #000;
  146.         outline: none;
  147.         width:80px;
  148.     }
  149. </style>
复制代码

       其中,表单焦点切换需要jquery支持,js代码如下:

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  2. <script>
  3.     $(function(){
  4.       var $form_inputs =   $('form input');
  5.       var $rainbow_and_border = $('.rain, .border');
  6.       /* Used to provide loping animations in fallback mode */
  7.       $form_inputs.bind('focus', function(){
  8.         $rainbow_and_border.addClass('end').removeClass('unfocus start');
  9.       });
  10.       $form_inputs.bind('blur', function(){
  11.         $rainbow_and_border.addClass('unfocus start').removeClass('end');
  12.       });
  13.       $form_inputs.first().delay(800).queue(function() {
  14.         $(this).focus();
  15.       });
  16.     });
  17. </script>
复制代码


查看效果: http://bbs.html5cn.org/thread-8044-1-1.html 


源代码下载: 发光表单.rar
更多
16

鲜花
2

握手

雷人

路过

鸡蛋

刚表态过的朋友 (18 人)

相关阅读

发表评论

最新评论

引用 风玲子 2012-7-11 11:38
真的是非常的漂亮啊呵呵
引用 zyf6578 2012-7-14 11:56
谢谢啦,终于大致弄懂了
引用 印象爱 2012-7-14 22:23
这效果不错,收下了~~~
引用 2005tent 2012-7-16 13:54
radial-gradient
引用 网站合作 2012-7-23 14:52
用火狐测试:  刚载入页面时四周的渐变是动态的, 但点击输入框,再离开就只显示彩色渐变,动作就停止了.
引用 yanny 2012-7-24 10:01
网站合作 发表于 2012-7-23 14:52
用火狐测试:  刚载入页面时四周的渐变是动态的, 但点击输入框,再离开就只显示彩色渐变,动作就停止了. ...

因为你的鼠标焦点不在这个登陆框上了。
引用 植可驴 2012-7-26 17:51
新人学习了。
引用 墙角的叶子 2012-7-29 09:16
霸气,有点科幻的味道
引用 _承_诺. 2012-7-30 12:03
貌似在IOS5上显示很完美啊
引用 f0071 2012-8-1 14:03
喜欢这个效果,!!!
引用 xskill 2012-8-3 13:04
好炫的说,果断收藏!
引用 童炎 2012-8-6 14:24
赞一个!
引用 sophieai 2012-8-9 21:47
灰常不错 支持~
引用 梦想★旋律 2012-8-10 08:24
本帖最后由 梦想★旋律 于 2012-8-10 08:24 编辑

非常漂亮 支持了
引用 niu 2012-8-10 11:03
颜色做的很酷
引用 coolodd 2012-8-10 14:26
學習了,真是非常的漂亮!!!!!!!!!!!
引用 cupboys 2012-8-12 09:15
原来网页也可以如此漂亮的技术
引用 cupboys 2012-8-12 09:16
谢谢啦,有长见识了
引用 !鬼不见明月! 2012-8-17 17:33
......................

查看全部评论(25)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 03:59

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部