首先，我们先准备好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. [Leetcode][Python]48: Rotate Image

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 48: Rotate Imagehttps://leetcode.com/pr ...

  2. 安装 SQL Server 2008 R2 的硬件和软件要求(转)

    以下各部分列出了安装和运行 SQL Server 2008 R2 的最低硬件和软件要求.有关 SharePoint 集成模式下的 Analysis Services 的要求的详细信息,请参阅硬件和软件 ...

  3. tsm ANS0326E问题处理

    备份tsm备份oracle 报错 ANS0326E This node has exceeded its maximum number of mount points. 查看所有节点详细信息 q no ...

  4. TagBuilder 性能如此低下?

    本文来自:http://www.cnblogs.com/zhuisha/archive/2010/03/12/1684022.html 需要通过ASP.NET MVC生成一个列表,MVC里面根正苗红的 ...

  5. Endian.BIG_ENDIAN和Endian.LITTLE_ENDIAN(http://smartblack.iteye.com/blog/1129097)

    Endian.BIG_ENDIAN和Endian.LITTLE_ENDIAN 在ByteArray和Socket中,能看到一个属性endain. endian : String 更改或读取数据的字节顺 ...

  6. Windows下搭建Eclipse+Android4.0开发环境

    官方搭建步骤: http://developer.android.com/index.html 搭建好开发环境之前须要下载以下几个文件包: 一.安装Java执行环境JRE(没这个Eclipse执行不起 ...

  7. 关于smali插桩

    虽说是老生常谈的东西了,稍微记录一下. 我觉得最重要的就是寄存器的问题了,如果需要额外的寄存器,要在smali函数的最前面将寄存器数量增加到需要的数量. 在smali代码中,寄存器有两种表示方式,一种 ...

  8. Oracle的关于建表，约束，查询等的练习

    从建立一个简单表,到实现一些复杂查询的例子, DROP TABLE grade;DROP TABLE item;DROP TABLE sporter;CREATE TABLE sporter( spo ...

  9. BZOJ 2780: [Spoj]8093 Sevenk Love Oimaster( 后缀数组 + 二分 + RMQ + 树状数组 )

    全部串起来做SA, 在按字典序排序的后缀中, 包含每个询问串必定是1段连续的区间, 对每个询问串s二分+RMQ求出包含s的区间. 然后就是求区间的不同的数的个数(经典问题), sort queries ...

  10. append, appendTo, after区别（preappend、before与这几个原理相同）

    append在被选元素结尾插入内容,是被包围在所选元素的标签内的. <script> $('p').append('<a>http</a>'); </scri ...