AI 助理
备案控制台
开发者社区 云计算 文章 正文

炫酷的CSS3发光搜索表单，附演示和源码

2014-04-12 1170
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:炫酷的CSS3发光搜索表单，附演示和源码昨天在国外的论坛上逛的时候，看到一篇帖子是求助如何利用CSS3实现发光效果的，网友回复中有一个推荐了一款CSS3发光搜索表单，利用CSS3的动画属性，设置0%和100%时的颜色样式，让其渐变，再配合有明显对比的背景，就能模拟出发光的效果了，我把那个CSS3发光表单下载了下来，先来看一下效果图： 图上的搜索框在被激活的时候会出现闪闪发光的特效。
原文: 炫酷的CSS3发光搜索表单，附演示和源码

昨天在国外的论坛上逛的时候，看到一篇帖子是求助如何利用CSS3实现发光效果的，网友回复中有一个推荐了一款CSS3发光搜索表单，利用CSS3的动画属性，设置0%和100%时的颜色样式，让其渐变，再配合有明显对比的背景，就能模拟出发光的效果了，我把那个CSS3发光表单下载了下来，先来看一下效果图：

图上的搜索框在被激活的时候会出现闪闪发光的特效。

我们可以在这里查看CSS3发光搜索表单的DEMO演示。

下面我们来一起看看源代码。

HTML代码非常简单，一个文本框和一个提交按钮：

<form action="" method="">            
        <input type="search" placeholder="What are you looking for?">                
        <button>Search</button>
</form>

然后重点就是CSS3代码了，首先是对搜索框和搜索按钮的样式进行初始化，为了配合背景能出现发光的效果，我们使用了glow动画，我们对它们的样式作了如下设置：

.webdesigntuts-workshop {
    background: #151515;
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.webdesigntuts-workshop:before,
.webdesigntuts-workshop:after {
    content: '';
    display: block;    
    height: 1px;
    left: 50%;
    margin: 0 0 0 -400px;
    position: absolute;
    width: 800px;
}

.webdesigntuts-workshop:before {
    background: #444;
    background: -webkit-linear-gradient(left, #151515, #444, #151515);
    background: -moz-linear-gradient(left, #151515, #444, #151515);
    background: -o-linear-gradient(left, #151515, #444, #151515);
    background: -ms-linear-gradient(left, #151515, #444, #151515);
    background: linear-gradient(left, #151515, #444, #151515);
    top: 192px;
}

.webdesigntuts-workshop:after {
    background: #000;
    background: -webkit-linear-gradient(left, #151515, #000, #151515);    
    background: -moz-linear-gradient(left, #151515, #000, #151515);    
    background: -o-linear-gradient(left, #151515, #000, #151515);    
    background: -ms-linear-gradient(left, #151515, #000, #151515);    
    background: linear-gradient(left, #151515, #000, #151515);    
    top: 191px;
}

.webdesigntuts-workshop form {
    background: #111;
    background: -webkit-linear-gradient(#1b1b1b, #111);
    background: -moz-linear-gradient(#1b1b1b, #111);
    background: -o-linear-gradient(#1b1b1b, #111);
    background: -ms-linear-gradient(#1b1b1b, #111);
    background: linear-gradient(#1b1b1b, #111);
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #272727;
    display: inline-block;
    font-size: 0px;
    margin: 150px auto 0;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.webdesigntuts-workshop input {
    background: #222;
    background: -webkit-linear-gradient(#333, #222);    
    background: -moz-linear-gradient(#333, #222);    
    background: -o-linear-gradient(#333, #222);    
    background: -ms-linear-gradient(#333, #222);    
    background: linear-gradient(#333, #222);    
    border: 1px solid #444;
    border-radius: 5px 0 0 5px;
    box-shadow: 0 2px 0 #000;
    color: #888;
    display: block;
    float: left;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #000;
    width: 200px;
}

.ie .webdesigntuts-workshop input {
    line-height: 40px;
}

.webdesigntuts-workshop input::-webkit-input-placeholder {
   color: #888;
}

.webdesigntuts-workshop input:-moz-placeholder {
   color: #888;
}

.webdesigntuts-workshop input:focus {
    -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;
    background: #222922;
    background: -webkit-linear-gradient(#333933, #222922);
    background: -moz-linear-gradient(#333933, #222922);
    background: -o-linear-gradient(#333933, #222922);
    background: -ms-linear-gradient(#333933, #222922);
    background: linear-gradient(#333933, #222922);
    border-color: #393;
    box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    color: #efe;
    outline: none;
}

.webdesigntuts-workshop input:focus::-webkit-input-placeholder { 
    color: #efe;
}

.webdesigntuts-workshop input:focus:-moz-placeholder {
    color: #efe;
}

.webdesigntuts-workshop button {
    background: #222;
    background: -webkit-linear-gradient(#333, #222);
    background: -moz-linear-gradient(#333, #222);
    background: -o-linear-gradient(#333, #222);
    background: -ms-linear-gradient(#333, #222);
    background: linear-gradient(#333, #222);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #444;
    border-left-color: #000;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 0 #000;
    color: #fff;
    display: block;
    float: left;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: 0 -1px 0 #000;
    width: 80px;
}    

.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
    background: #292929;
    background: -webkit-linear-gradient(#393939, #292929);    
    background: -moz-linear-gradient(#393939, #292929);    
    background: -o-linear-gradient(#393939, #292929);    
    background: -ms-linear-gradient(#393939, #292929);    
    background: linear-gradient(#393939, #292929);
    color: #5f5;
    outline: none;
}

.webdesigntuts-workshop button:active {
    background: #292929;
    background: -webkit-linear-gradient(#393939, #292929);
    background: -moz-linear-gradient(#393939, #292929);
    background: -o-linear-gradient(#393939, #292929);
    background: -ms-linear-gradient(#393939, #292929);
    background: linear-gradient(#393939, #292929);
    box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
    top: 1px;
}

下面是我们定义的glow动画，为了适应不同内核的浏览器，我们分别对其做了如下设置：

@-webkit-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-moz-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-o-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-ms-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

最后我们将这个效果的源码打包一份供大家参考学习。下载地址>>

关键词：
CSS源码
CSS搜索
CSS表单
CSS表单源码
CSS演示
杰克.陈
目录
相关文章
疯狂的猿
|
8月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
疯狂的猿
143 34
疯狂的猿
|
8月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
疯狂的猿
450 33
疯狂的猿
|
10月前
|
前端开发
基于CSS3+Bootstrap实现的侧边栏后台菜单源码
CSS3+Bootstrap实现的侧边栏后台菜单特效源码是一段基于Bootstrap和图标库制作的侧边栏菜单后台管理页面效果代码，简洁大方、易于管理，是一段非常不错的后台菜单栏效果，欢迎对此段代码感兴趣的朋友前来下载。
疯狂的猿
181 54
疯狂的猿
|
8月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
疯狂的猿
117 22
疯狂的猿
|
9月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
204 24
疯狂的猿
|
10月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
疯狂的猿
181 31
哈你真皮
|
9月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序，按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
哈你真皮
111 2
疯狂的猿
|
9月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果，呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现，没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
181 6
疯狂的猿
|
10月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码，具有真实的视觉感，同时文字还会在旋转过程中显示出灯光的反射效果，很有意思，欢迎对此段代码感兴趣的朋友前来下载使用。
疯狂的猿
108 6
疯狂的猿
|
10月前
CSS3注册表单文本框占位符特效源码
CSS3注册表单文本框占位符特效源码是一段简单的css3 input文本框占位符，placeholders占位符内容填写注册表单特效，非常有意思，欢迎有兴趣的朋友前来下载使用。
疯狂的猿
87 5

热门文章

最新文章

  • 1
    （转）CSS+DIV float 定位
  • 2
    网页引入外部css文件格式演示
  • 3
    CSS学习2----padding/border/margin
  • 4
    初识DIV+CSS
  • 5
    实践 HTML5 的 CSS3 Media Queries
  • 6
    你需要知道的 CSS 技巧：图片篇2 你的图片裂开了怎么办？
  • 7
    css 实现 title的效果，并且自己写修改类似title样式
  • 8
    如何用纯 CSS 创作在文本前后穿梭的边框
  • 9
    深入理解CSS3 Animation 帧动画
  • 10
    网页设计DIV+CSS——第2 天:什么是名字空间
  • 1
    WebView2 控件（基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件），保存资源(图片、脚本、CSS)
    201
  • 2
    文字显示在div 最下面，css怎么写
    237
  • 3
    B超单生成器在线制作， 怀孕b超单图片在线制作，JS+CSS+html演示
    820
  • 4
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
    898
  • 5
    个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
    220
  • 6
    个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
    604
  • 7
    征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
    941
  • 8
    银行流水生成器在线制作，银行流水虚拟生成器app，h5+js+css【仅供学习用途】
    1991
  • 9
    制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
    312
  • 10
    医院检查单子p图软件，在线制作仿真病历，js+css+html装逼神器
    307

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证