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

时间：2016-02-29
       今天给大家秀一款带有发光动画的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.     }

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

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权