一个发光的搜索边框(纯CSS3)
这是效果图,边框会不停的闪,兼容各种浏览器
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)的更多相关文章
- 纯CSS3实现自定义涂鸦风格的边框
今天我们要来分享一款基于纯CSS3的自定义边框应用,看上去它像一个Tooltip控件,因为下边框有一个小三角,就像很多地方的引用文本框一样.另外这款CSS3边框是涂鸦风格的,看起来很有个性.用CSS3 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 一款纯css3实现的发光屏幕旋转特效
今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="s ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
随机推荐
- SQLite中使用时的数据类型注意
在使用SQLite时,要注意:在SQLite中的Integer类型,对应在C#中需要使用long类型或者Int64 在使用SQLite时,要注意:在SQLite中存放的日期类型必须是如此:yyyy-M ...
- 寒假222_Topcoder SRM648
序号1: A,随便模拟好了,最后30秒发现一个都比的错误,无奈输错格式. 2: B,问你出去两个点,以及所产生的边 问你:产生多的联通快 加答案加1. 数据小,随便写暴力 3: copy思路. 我们先 ...
- Grid分组汇总
Ext.onReady(function () { Ext.define('personInfo', { extend: 'Ext. ...
- c# 与flash通信简介
许久不曾写随笔,即使许久的怠惰,是该抬抬头,看看天了. 公司项目,项目要求是在winForm端先获取下位机的肌电信号采集数据,然后根据这些数据的变化来控制flash游戏,这样一些患者在flash游戏中 ...
- asp.net网站中添加百度地图功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- Good Bye 2015 B. New Year and Old Property 计数问题
B. New Year and Old Property The year 2015 is almost over. Limak is a little polar bear. He has re ...
- Good Bye 2015 A. New Year and Days 签到
A. New Year and Days Today is Wednesday, the third day of the week. What's more interesting is tha ...
- MongoDB 安装,启动与基本使用
一.MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式.Mongo使用C++ ...
- lintcode:被围绕的区域
被围绕的区域 给一个二维的矩阵,包含 'X' 和 'O', 找到所有被 'X' 围绕的区域,并用 'X' 填充满. 样例 给出二维矩阵: X X X X X O O X X X O X X O X X ...
- mq_unlink
NAME mq_unlink - 销毁一个消息队列 (REALTIME) SYNOPSIS #include <mqueue.h> int mq_unlink(const char *na ...