首先，我们先准备好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. 解决GitHub未配置SSH key提示错误信息

    git push -u origin master Permission denied (publickey). fatal: Could not read from remote repositor ...

  2. 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)

    原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...

  3. as3 页游中，新手指导中，屏蔽所有交互对象，但除了指定交互对象可用的方法【转http://blog.csdn.net/linjf520/article/details/9450945】

    package { import flash.display.InteractiveObject; import flash.display.Stage; import flash.events.Mo ...

  4. oracle参数文件spfile和pfile

    一.参数文件说明 PFILE(Initialiazation Parameter Files)初始化参数文件,是文本文件,可直使用文本编辑器查看.如果数据库使用的是初始化参数文件PFILE,要想永久修 ...

  5. C#运用实例.读取csv里面的词条，对每一个词条抓取百度百科相关资料，然后存取到数据库

    第一步:首先需要将csv先装换成datatable,这样我们就容易进行对datatable进行遍历: /// 将CSV文件的数据读取到DataTable中 /// CSV文件路径 /// 返回读取了C ...

  6. 什么是 CSS 预处理器？

    什么是 CSS 预处理器?  就CSS本身而言,对于大多数Web前端从业人员来说就不是问题.学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.换句话说,CSS基本上是 ...

  7. android系统将普通应用升级为系统应用

    作为一名程序员,有的时候并不是使用软件,而是去改造软件,不仅仅只是会编程而已,还要满足客户的需求.这样,才能开发出符合客户需求的应用,在关于到涉及到android底层的应用的时候,手机就需要root了 ...

  8. 初学.NET小技巧（不断更新）

    1.快速打出Console.WriteLine : 输入cw,然后按两下tab键. 2.创建一个函数快捷键:bool b = IsPrimeNumber();   把光标放到函数名上,Shift+Al ...

  9. 去掉UItableview headerview黏性

    //去掉UItableview headerview黏性 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scrollView ...

  10. zookeeper_02：zookeeper基础

    ZooKeeper基础概述 ZooKeeper维护一个小型的数据节点,这些节点被称为znode,采用类似于文件系统的层级树状结构进行管理. 针对一个znode,没有数据常常表达了重要的信息.比如,在主 ...