一款带有发光动画的HTML5表单-H5教程-PHP中文網

首頁

web前端

H5教程

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

PHP中文网

May 17, 2016 am 09:08 AM

今天给大家秀一款带有发光动画的HTML5表单，挺酷的，效果图如下：

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

HTML代码如下：

<div class="rain">
    <div class="border start">
        <form>
            <label for="email">Email</label>
            <input name="email" type="text" placeholder="Email"/>
            <label for="pass">Password</label>
            <input name="pass" type="password" 
placeholder="Password"/>
                        <input type="submit" value="LOG IN"/>
        </form>
    </div>
</div>

CSS代码如下：

<style>
    body{
        background: #000;
        color: #DDD;
        font-family: &#39;Helvetica&#39;, &#39;Lucida Grande&#39;, &#39;Arial&#39;, sans-serif;
    }
    .border,
    .rain{
        height: 170px;
        width: 320px;
    }
    /* Layout with mask */
    .rain{
         padding: 10px 12px 12px 10px;
         -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px 
rgba(0,0,0,1) inset;
         -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px 
rgba(0,0,0,1) inset;
         box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px 
rgba(0,0,0,1) inset;
         margin: 100px auto;
    }
    /* Artifical "border" to clear border to bypass mask */
    .border{
        padding: 1px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    .border,
    .rain,
    .border.start,
    .rain.start{
        background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
        background-position: 0 0, 0 0, 0 0, 0 0;
        /* Blue-ish Green Fallback for Mozilla */
        background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 
15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
        /* Add "Highlight" Texture to the Animation */
        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)));
        /* Starting Color */
        background-color: #39f;
        /* Just do something for IE-suck */
        filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr=&#39;#00BA1B&#39;, endColorstr=&#39;#00BA1B&#39;,GradientType=1 );
    }
     
    /* Non-keyframe fallback animation */
    .border.end,
    .rain.end{
        -moz-transition-property: background-position;  
        -moz-transition-duration: 30s;
        -moz-transition-timing-function: linear;
        -webkit-transition-property: background-position;  
        -webkit-transition-duration: 30s;  
        -webkit-transition-timing-function: linear;
        -o-transition-property: background-position;  
        -o-transition-duration: 30s;  
        -o-transition-timing-function: linear;
        transition-property: background-position;  
        transition-duration: 30s;  
        transition-timing-function: linear;
        background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;    
    }
     
    /* Keyfram-licious animation */
    @-webkit-keyframes colors {
        0% {background-color: #39f;}
        15% {background-color: #F246C9;}
        30% {background-color: #4453F2;}
        45% {background-color: #44F262;}
        60% {background-color: #F257D4;}
        75% {background-color: #EDF255;}
        90% {background-color: #F20006;}
        100% {background-color: #39f;}
    }
    .border,.rain{
        -webkit-animation-direction: normal;
        -webkit-animation-duration: 20s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: colors;
        -webkit-animation-timing-function: ease;
    }
     
    /* In-Active State Style */
    .border.unfocus{
        background: #333 !important;    
         -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
         -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
         box-shadow: 0px 0px 15px rgba(255,255,255,.2);
         -webkit-animation-name: none;
    }
    .rain.unfocus{
        background: #000 !important;    
        -webkit-animation-name: none;
    }
     
    /* Regular Form Styles */
    form{
        background: #212121;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        height: 100%;
        width: 100%;
        background: -moz-radial-gradient(50% 46% 90deg,circle 
closest-corner, #242424, #090909);
        background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, 
from(#242424), to(#090909));
    }
    form label{
        display: block;
        padding: 10px 10px 5px 15px;
        font-size: 11px;
        color: #777;
    }
    form input{
        display: block;
        margin: 5px 10px 10px 15px;
        width: 85%;
        background: #111;
        -moz-box-shadow: 0px 0px 4px #000 inset;
        -webkit-box-shadow: 0px 0px 4px #000 inset;
        box-shadow: 0px 0px 4px #000 inset;
        outline: 1px solid #333;
        border: 1px solid #000;
        padding: 5px;
        color: #444;
        font-size: 16px;
    }
    form input:focus{
        outline: 1px solid #555;
        color: #FFF;
    }
    input[type="submit"]{
        color: #999;
        padding: 5px 10px;
        float: right;
        margin: 40px 0;
        border: 1px solid #000;
        font-weight: lighter;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        background: #45484d;
        background: -moz-linear-gradient(top, #222 0%, #111 100%);
        background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,#222), color-stop(100%,#111));
        filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr=&#39;#22222&#39;, endColorstr=&#39;#11111&#39;,GradientType=0 );
        -moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) 
inset;
        -webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px 
rgba(255,255,255,.3) inset;
        box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) 
inset;
        text-shadow: 0 1px 1px #000;
        outline: none;
        width:80px;
    }
</style>

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

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    $(function(){
      var $form_inputs =   $(&#39;form input&#39;);
      var $rainbow_and_border = $(&#39;.rain, .border&#39;);
      /* Used to provide loping animations in fallback mode */
      $form_inputs.bind(&#39;focus&#39;, function(){
        $rainbow_and_border.addClass(&#39;end&#39;).removeClass(&#39;unfocus 
start&#39;);
      });
      $form_inputs.bind(&#39;blur&#39;, function(){
        $rainbow_and_border.addClass(&#39;unfocus 
start&#39;).removeClass(&#39;end&#39;);
      });
      $form_inputs.first().delay(800).queue(function() {
        $(this).focus();
      });
    });
</script>

以上就是一款带有发光动画的HTML5表单的内容，更多相关内容请关注PHP中文网（www.php.cn）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。