这是效果图，边框会不停的闪，兼容各种浏览器

HTML代码：

<body>

<div class="container">

    <form method="post" action="#">

        <div class="input-group">

            <input type="text" placeholder="请告诉我，你在寻找什么" >

            <span class="input-group-btn">

                <button class="btn" type="submit">立即搜索</button>

            </span>

        </div>

    </form>

</div>

</body>

CSS代码：

@charset "utf-8";

/* CSS Document */

body{padding:; margin:; font-size:16px;}

input{ border:; outline:;} 

/* 设置外部容器样式 开始 使用媒体查询以兼容各种设备*/

.container{ width:100%; }

@media(min-width:800px) and (max-width:1280px){.container{ width:65%;}}

@media(min-width:1281px){.container{ width:45%;}}

/* 设置外部容器样式 结束 */

/*设置表单组中输入框的样式*/

.input-group{ width:90%; margin:5%; }

.input-group input { height:3em; line-height:3em; width:66%;  border:1px solid #cccccc; border-top-left-radius:1.5em;/*设置左上角的边框*/

                        border-bottom-left-radius:1.5em;/*控制左下边的边框*/padding-left:1.2em; font-size:14px;}

@media(min-width:800px) and (max-width:1280px){.input-group input{ height:3em; line-height:3em; font-size:22px;}}

/* 设置按钮样式的内边距 */

.btn{width:27%; float:right;}

/* 设置表单组中按钮的样式 */

.input-group .input-group-btn .btn{

    height:2.9em;

    border:1px solid #cccccc;

    border-top-right-radius:1.5em;

    border-bottom-right-radius:1.5em;

    border-left:none;

    color:white;

    /*text-shadow:0 0 2px #fff, 0 0 4px #fff, 0 0 60px #fff, 0 0 8px #ff00de, 0 0 10px #ff00de, 0 0 12px #ff00de, 0 0 14px #ff00de, 0 0 16px #ff00de;*/

    font-family: "微软雅黑"; text-align:center; color:#fff; text-shadow:3px 3px 3px red;

    font-size:16px;

}

@media(min-width:800px) and (max-width:1280px){.input-group .input-group-btn .btn{ height:2.7em; line-height:2.7em; font-size:26px;}}

@media(min-width:1281px){.input-group .input-group-btn .btn{height:2.3em; line-height:2.3em; font-size:20px; }}

/*设置表单组元素统一向左浮动    即让输入框和按钮和在一起*/

.input-group input,.input-group button{float:left;}

/* 定义动画帧 开始 */

@-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. 纯CSS3实现自定义涂鸦风格的边框

    今天我们要来分享一款基于纯CSS3的自定义边框应用,看上去它像一个Tooltip控件,因为下边框有一个小三角,就像很多地方的引用文本框一样.另外这款CSS3边框是涂鸦风格的,看起来很有个性.用CSS3 ...

  2. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  3. 一款纯css3实现的发光屏幕旋转特效

    今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="s ...

  4. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  5. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  8. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  9. 纯CSS3实现打火机火焰动画

    HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...

随机推荐

  1. （转）Engineering Productivity

    (转)http://www.wandoujia.com/blog/from-qa-to-ep 这个文章之前读过,很不错.今天再读,有不一样的感受!推荐下. 下面是几段摘录: EP 是什么 说到这里,E ...

  2. HTML5 canvas 绘图步骤

    1.先把canvas选出来,不选出来你往哪儿画! var oCan=  document.getElementById('xxx'); 2.声明基于 canvas 的context对象,没他你怎么调用 ...

  3. iOS模型以及使用

    个人习惯,也可以不这样写 创建模型基类: #import <Foundation/Foundation.h> @interface WJBaseModel : NSObject //将字典 ...

  4. Android ListVIew 详解（一）

    在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示.抽空把对ListView的使用做了整理,并写了个小例子,如下图. 列表的显示需要三 ...

  5. ubuntu第一次设置root密码

    安装ubuntu时,系统让用户创建了一个非root用户,系统启动后使用这个用户,在需要执行超级用户权限的指令时,可以通过sudo来执行.为此我们可以通过这样的方式修改root的密码:dengfei@d ...

  6. JDBC第四次学习

    传智播客李勇老师的JDBC系列学习终于接近尾声了,好开心,能学到这么多的东西,还不赶快记录下来,留待以后回味! 如何使用开源项目DBCP(实际项目中常用)    主要分为三个步骤: 使用DBCP必须用 ...

  7. Python概述_软件安装_常见问题

    1.  Python安装 目前python有2个大版本,2和3,由于2和3语法有差别,现有的许多库都是基于python2开发,本系列文章以python2为主. 1.1  重要概念 1. 动态语言 运行 ...

  8. Android 核心分析 之六 IPC框架分析 Binder，Service，Service manager

    IPC框架分析 Binder,Service,Service manager 我首先从宏观的角度观察Binder,Service,Service Manager,并阐述各自的概念.从Linux的概念空 ...

  9. Android 核心分析 之五基本空间划分

    基本空间划分 Google给了我们一张系统架构图,在这张图上我们可以看到Android的大体框架组成.                   11.jpg (175.6 KB, 下载次数: 0) 下载附 ...

  10. 学了C语言，如何写个程序计算出每个月的第一个星期一对应的日期

    在前面,我们分别利用泰勒公式和C标准库中的mktime()函数推算了某个特定日期所对应的星期几,刚做完这些,就又遇到了一个与日期相关的新任务: 老板把每个月例会的时间定在了每个月的第一个星期一,他让我 ...