一款带有发光动画的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 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.避免常见错误，如标签未闭合，确保代码有效性。