久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

一款帶有發(fā)光動畫的HTML5表單

html5教程 html5模板網(wǎng)
今天給大家秀一款帶有發(fā)光動畫的HTML5表單，挺酷的，效果圖如下： 當(dāng)表單獲取焦點時，表單四周就會呈現(xiàn)出發(fā)光動畫的效果，并不斷地進(jìn)行顏色漸變；當(dāng)表單失去焦點時，停止發(fā)光。
       今天給大家秀一款帶有發(fā)光動畫的HTML5表單，挺酷的，效果圖如下：

20120130194719_3455.jpg



       當(dāng)表單獲取焦點時，表單四周就會呈現(xiàn)出發(fā)光動畫的效果，并不斷地進(jìn)行顏色漸變；當(dāng)表單失去焦點時，停止發(fā)光。其中顏色漸變的動畫只有基于webkit的瀏覽器才有效果，比如chrome和safari。下面簡單貼一下實現(xiàn)這個發(fā)光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>
復(fù)制代碼

       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>
復(fù)制代碼

       其中，表單焦點切換需要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>
復(fù)制代碼


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


源代碼下載： 發(fā)光表單.rar
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。

相關(guān)文檔推薦

由于實際運行環(huán)境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達(dá)到，所以這部分不是開發(fā)者能夠決定的，開發(fā)者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標(biāo)簽、以及HTML5提供的對JavascriptAPI的擴(kuò)展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應(yīng)用的豐富，HTML5 工程師們已經(jīng)不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應(yīng)用人性化的操作體驗，特別是原生應(yīng)用與生俱來的豐富的手勢系統(tǒng)。HTML5 沒有提
你想要在自己網(wǎng)站上分享一個產(chǎn)品，或者是一個作品集，又或者僅僅只是一個靈感。在你發(fā)布到網(wǎng)上之前，你想讓它看起來有吸引力，專業(yè)，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設(shè)計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認(rèn)!這是對我的極大鼓勵!我的
本文主要內(nèi)容有：框架與組件、構(gòu)建生態(tài)、開發(fā)技巧與調(diào)試、html、css與重構(gòu)、native/hybrid/桌面開發(fā)、前端/H5優(yōu)化、全棧/全端開發(fā)、研究實驗、數(shù)據(jù)分析與監(jiān)控、其它軟技能、前端技術(shù)網(wǎng)
主站蜘蛛池模板： 国产一区二区三区四区三区四 | 精品一区二区三区在线观看国产 | 久久com | 欧美二级| 国产激情在线 | 黄色片免费看 | 日韩高清成人 | 一级黄色片毛片 | 亚洲高清在线播放 | 波多野结衣一区二区 | 中文字幕精品一区 | 日本三级网址 | 亚洲精品日韩综合观看成人91 | 国产成人精品999在线观看 | 成人午夜在线 | 午夜精品在线 | 亚洲第一视频网 | 日韩欧美在线免费观看 | 日日操夜夜操天天操 | 亚洲视频中文 | 91在线视频免费观看 | 精品视频在线免费观看 | 盗摄精品av一区二区三区 | 一区二区精品 | 99精品久久99久久久久 | 一区二区三区国产视频 | 特黄毛片 | 在线欧美激情 | 99免费视频| 国产精品久久九九 | 久久久久久久国产精品 | 亚洲成人激情在线观看 | 欧美性生活一区二区三区 | 日韩精品1区2区3区 爱爱综合网 | 日韩欧美天堂 | 久久久成人精品 | 精品久久久久久中文字幕 | 国产亚洲成av人在线观看导航 | 午夜精品一区二区三区在线视频 | 国产二区在线播放 | 99精品国产一区二区三区 |