首先，我们先准备好html代码:
CSS3实战开发之发光控件的实现
此时，我们先看一下此时未加样式时的运行效果：
接着我们再设置页面外部容器的样式：
@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;}