首先，我们先准备好html代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">
<meta name="keywords" content="css3教程,css3实战开发,css3案例,css3特效,互联网" >

<link rel="stylesheet" href="styles.css">

<title>CSS3实战开发之发光控件的实现</title>

</head>

<body>

<div class="container">

    <form method="post" action="http://www.itdriver.cn">

        <div class="input-group">

            <input type="text" placeholder="请告诉我，你在寻找什么" >

            <span class="input-group-btn">

                <button class="btn" type="submit">立即搜索</button>

            </span>

        </div>

    </form>

</div>

</body>

</html>

此时，我们先看一下此时未加样式时的运行效果：

接着我们再设置页面外部容器的样式：

@charset "utf-8";

*{ /*清除所有元素默认内边距和外边距*/

    padding:0;

    margin:0;

}

/* 设置外部容器样式 开始 */

.container{

    width:80%;

    margin:auto;

}

.container form{

    margin:10em;

}

form { font-size:.8em; }

/* 设置外部容器样式 结束 *

在修改完表单布局以及内外边距后，我们再设置表单组input-group及其内部元素的样式：

.input-group input { /*设置表单组中输入框的样式*/

    height:3em;

    line-height:3em;

    width:20em;

    border:1px solid #cccccc;

    border-top-left-radius:1.5em;

    border-bottom-left-radius:1.5em;

    padding-left:1.2em;

}

.btn{ /* 设置按钮样式的内边距 */

    padding:0 .5em;

}

.input-group .input-group-btn .btn{ /* 设置表单组中按钮的样式 */

    height:3.12em;

    border:1px solid #cccccc;

    border-top-right-radius:1.5em;

    border-bottom-right-radius:1.5em;

    border-left:none;

}

/*设置表单组元素统一向左浮动*/

.input-group input,.input-group button{

    float:left;

}

此时我们来预览一下表单应用样式后的效果：

从效果图我们可以发现，搜索表单组的样式已经出来了，但是并不是我们期待的发光效果。

我们要知道如果单凭CSS2或CSS1，是实现不了发光动画效果的，这个时候我们可以借助CSS3的动画效果。

现在我们利用CSS3新增动画特性，定义动画帧：

/* 定义动画帧 开始 */

@-webkit-keyframes glow {

    0% {

        border-color: #cccccc;

        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);

    }

    100% {

        border-color: #66FFFF;

        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);

    }

}

@-moz-keyframes glow {

    0% {

        border-color: #cccccc;

        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);

    }

    100% {

        border-color: #66FFFF;

        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);

    }

}

@-o-keyframes glow {

    0% {

        border-color: #cccccc;

        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);

    }

    100% {

        border-color: #66FFFF;

        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);

    }

}

@-ms-keyframes glow {

    0% {

        border-color: #cccccc;

        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);

    }

    100% {

        border-color: #66FFFF;

        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);

    }

}

@keyframes glow {

    0% {

        border-color: #cccccc;

        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);

    }

    100% {

        border-color: #66FFFF;

        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);

    }

}

/* 定义动画帧 结束 */

我在一开始也讲了，当表单组中的元素或组件获得焦点的时候，该元素或组件有发光效果。

此时我们给表单组中的元素应用获得焦点时的样式：

.input-group input:focus,

.input-group .input-group-btn .btn:focus{ /*当表单组中组件获得焦点的时候，执行动画*/

    outline:none;

    -webkit-animation: glow 800ms ease-out infinite alternate;

    -moz-animation: glow 800ms ease-out infinite alternate;

    -o-animation: glow 800ms ease-out infinite alternate;

    -ms-animation: glow 800ms ease-out infinite alternate;

    animation: glow 800ms ease-out infinite alternate;

}

CSS3实战开发 表单发光特效实战开发的更多相关文章

  1. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  2. 9款大气实用的HTML5/CSS3注册登录表单

    1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...

  3. 自制“低奢内”CSS3登入表单，包含JS验证，请别嫌弃哦。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  4. Web开发-表单验证

    表单验证是Web开发中必不可少的一个环节,用来限制用户输入数据的规范和一致性.那么如何能够简化这一任务,让开发人员通过简单的属性设置就能达到目的呢? FineUI在这一点上也是下足了功夫,比Asp.N ...

  5. antd实战：表单上传，文件列表的过滤与限制。

    用表单上传组件最痛苦的地方是: 他的诸多行为与纯上传组件不一样,而表单的文档关于这一块基本上没有提,只能自己试. 比如我想做一个上传前的拦截. beforeUpload: (file, fileLis ...

  6. 微信小程序实战：表单与选择控件的结合

    先上代码. login.wxml <mp-toptips msg="{{error}}" type="error" show="{{error} ...

  7. jquery ui 常用（二）（对话框 | 旋转器 | 工具提示框（表单） | 特效（百叶窗） ）

    一.添加信息的对话框  http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-dialog-modal-form. 模态表单 ...

  8. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  9. （数据科学学习手札112）Python+Dash快速web应用开发——表单控件篇（上）

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

随机推荐

  1. codec ruby和json格式输出

    zjtest7-frontend:/usr/local/logstash-2.3.4/config# cat geoip.conf input {stdin {} } filter { geoip { ...

  2. eclipse下的web开发问题总结[struts2文件上传]

    最近需要做一个web方面的文件上传的Demo.开发工具是eclipse[具体名称:Eclipse IDE for Java EE Developers 版本:2.0.0.20130613-0530]. ...

  3. git 之别名配置

    在git操作中有很多命令我们自己可以起别名,以提高操作效率. 1. 配置方式 1)项目级别的配置,仅对当前项目生效(将写入到.git/config文件中)    $ git config --glob ...

  4. hdu 2059 龟兔赛跑（dp）

    龟兔赛跑 Problem Description 据说在很久很久以前,可怜的兔子经历了人生中最大的打击——赛跑输给乌龟后,心中郁闷,发誓要报仇雪恨,于是躲进了杭州下沙某农业园卧薪尝胆潜心修炼,终于练成 ...

  5. linux下的时间及时区设置

    一.时间设置及同步 1修改系统时间 #date -s 06/18/14 #date -s 14:20:50 2命令查看.设置硬件时间 #hwclock  --show 或者clock  --show ...

  6. UMeditor 百度编辑器Mini学习

    准备开始研究百度的mini编辑器 1.4.3的昨天配置好了 ,也可以用了(.net 3.5) 为此我废了好大的力 研究了一天才弄好   结果今天一来上司就说 这个1.4.3 我们没必要用这么大的  用 ...

  7. JavaScript 【 IE中的XML DOM 】

    IE中的 XML DOM 在统一的正式规范出来以前,浏览器对于XML的解决方案各不相同.DOM2级提出了动态创建XML DOM规范,DOM3进一步增强了XML DOM.所以,在不同的浏览器实现XML的 ...

  8. div滚动与控制

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  9. couldn't connect to the device trackpad

  10. 菜鸟的jQuery源码学习笔记（三）

    each: function(callback, args) { return jQuery.each(this, callback, args); }, each:这个调用了jQuery.each方 ...