首先，我们先准备好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. linux之SQL语句简明教程---GROUP BY

    我们现在回到函数上.记得我们用 SUM 这个指令来算出所有的 Sales (营业额)吧!如果我们的需求变成是要算出每一间店 (Store_Name) 的营业额 (Sales),那怎么办呢?在这个情况下 ...

  2. UML_交互图

    交互图(Interaction Diagram)用来描述系统中的对象是如何进行相互作用的.即一组对象是如何进行消息传递的. 当交互图建模时,通常既包括对象(每个对象都扮演某一特定的角色),又包括消息( ...

  3. C#字典Dictionary排序（顺序、倒序）

    这里是针对.NET版本过低的排序方式,没怎么用过,记录一下: 一.创建字典Dictionary 对象 假如 Dictionary 中保存的是一个网站页面流量,key 是网页名称,值value对应的是网 ...

  4. C语言课程设计—图书管理系统

    这是本人大一第二学期初C语言课程设计的作品,嘿嘿,本来以为已经找不到原稿了,今天无意中居然在QQ网络硬盘中找到了当初的teta版,公布于此,以作纪念. C源码例如以下: #include<std ...

  5. 有一种设计风格叫RESTful

    一 前言 刚看了<RESTful Web APIs中文版>.试读了前两章. 每本书的第一章都是抽象得不得了,是整本书的总结:开篇说基础有点简单,从教你怎么向地址栏输入地址訪问网页開始(某人 ...

  6. Parallels destop8 无法创建bootcamp虚拟机

    创建基于Boot Camp的虚拟机时弹出“PRL_ERR_DISK_FILE_OPEN_ERROR (0x80021014)”错误提示,由于Mac系统权限错误或Boot Camp内Windows系统权 ...

  7. Web 开发中 9 个有用的提示和技巧

    在本文中,我们给出 9 个有用的 HTML.CSS 和 JavaScript 的技巧和提示,可能在做 Web 开发中经常会需要用到的,其中有几个是关于 HTML5 和 CSS3 的,如果你是一个前端开 ...

  8. Android中 Http请求

    HttpClient public class MainActivity extends Activity { private Button button; @Override protected v ...

  9. java工厂类与反射机制

    java 简单工厂类 2012-04-22 15:44:07|  分类: java |  标签:java工厂类  简单工厂类  |举报|字号 订阅     简单工厂模式需要由以下角色组成: 接口    ...

  10. 安装rvm命令行工具

    rvm是一个命令行工具,可以提供一个便捷的多版本ruby环境的管理和切换. https://rvm.io/ 如果你打算学习ruby/rails, rvm是必不可少的工具之一. 这里所有的命令都是再用户 ...