首先，我们先准备好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. uva 10026 Shoemaker's Problem _贪心

    题意:鞋匠现在有n个工作要做,每个工作要x天,没延迟一天需要付款y,鞋匠每天只能做一个工作,问使得鞋匠最少赔款的工作顺序. 思路:工作和工作之间排序,如果a.value*b.day>b.valu ...

  2. Median of Two Sorted 求两个有序数组的中位数

    中位数是把一个数的集合划分为两部分,每部分包含的数字个数相同,并且一个集合中的元素均大于另一个集合中的元素. 因此,我们考虑在一个任意的位置,将数组A划分成两部分.i表示划分数组A的位置,如果数组A包 ...

  3. xml中，button改变背景颜色方法

    在画几个设置界面,用到了button控件,对于button空间的背景色在不同状态下的颜色改变方法,做了一下尝试,发现了两种背景颜色改变的方法,就总结了下. 方法一尝试了好多遍才好,要点在于,在sele ...

  4. (转)12款开源JavaScript库

    JavaScipt几乎是所有前端开发人员必会的编程语言,并且,随着各种移动APP的串红,JavaScript还可以用来开发移动应用.除此以外,为了丰富前端/移动开发,有不少开发者推出了各种基于Java ...

  5. 解决 Boot Camp 虚拟机升级到 Windows 10 后 Parallels Desktop 不能识别的问题

    最近几天 Win10 正式版开始推送了,对于喜欢折腾的博主,在第一时间就把 Mac 中 Boot Camp 从 Win7 升级到 Win10,初步体验还不错,等博主用过一段时间之后,再来给大家分享使用 ...

  6. SSH框架中一些技巧、处理办法

    1.使用jstree插件时,操作成功直接刷新jstree 该页面(index.jsp)本身使用iframe框架jstree在leftFrame,操作页(add_input.jsp.add_succes ...

  7. c++线程创建传递的参数发生改变

    看看如下代码,觉得输出会是什么? #include "stdafx.h" #include <windows.h> #include <iostream> ...

  8. JUnit报空指针错误，控制台不报任何错误

    解决方法:1. 在测试类的beforeClass方法上加try-catch块 2. 添加main方法,里面添加beforeClass();

  9. Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  10. MYSQL设置字段数据过长自动截断

    自动截断如下设置: windows: 修改my.ini: [mysqld] sql-mode="STRICT_TRANS_TABLES" linux: 修改/ect/mysql/m ...