炫酷的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:;
} .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:;
height: 40px;
margin:;
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:;
height: 40px;
line-height: 40px;
margin:;
padding:;
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;
}
}
最后我们将这个效果的源码打包一份供大家参考学习。下载地址>>
炫酷的CSS3发光搜索表单,附演示和源码的更多相关文章
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- 炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
- 分享7款非常实用的jQuery/CSS3插件演示和源码
上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...
- 炫酷霸气的HTML5/jQuery应用及源码
也许在5年前,HTML5还是一种很前卫的技术,大家还只是将它当做实验来看待,更别说产品应用了.但是现在HTML5已经非常流行,无论从PC端还是移动端,HTML5都扮演着非常重要的角色.今天我们要分享的 ...
- 7款经典炫酷的HTML5/jQuery动画应用示例及源码
jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...
- 经典炫酷的HTML5/jQuery动画应用示例及源码
jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...
- 利用Bootstrap快速搭建个人响应式主页(附演示+源码)
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...
- 炫酷的CSS3响应式表单
原创YouTube@ Online Tutorials css代码: * { margin: 0; padding: 0; box-sizing: border-box; font-family: ' ...
- 水印第三版 ~ 变态水印(这次用Magick.NET来实现,附需求分析和源码)
技能 汇总:http://www.cnblogs.com/dunitian/p/4822808.html#skill 以前的水印,只是简单走起,用的是原生态的方法.现在各种变态水印,于是就不再用原生态 ...
随机推荐
- C# 32位程序访问64位系统注册表
原文:C# 32位程序访问64位系统注册表 我的上一篇文章已经阐述了“32位程序和64位程序在64位平台上读\写注册表的区别”,那么接下来将要回答上篇所留下来的一个问题:32位程序如何访问64位系统注 ...
- Asp.net网站的简单发布
概述 网站是由一个个页面组成的,是万维网具体的变现形式,关于万维网,网页的方面的理论知识,大家可以看一看这篇博客:万维网文档,在这里就不多说了.网站的发布要到达的一个目的就是,别人可以通过浏览器访问该 ...
- 【SICP读书笔记(二)】使用过程来黏合数据 —— 酷炫吊的消息传递机制
首先,让我们来看几个内建函数 (cons x y),作用是把x和y绑定成一个序对 (car z),作用是提取z序对的第一个元素 (cdr z),作用是提取z序对的第二个元素 容易看出,这个东西有点类似 ...
- CSAPP 六个重要的实验 lab5
CSAPP && lab5 实验指导书: http://download.csdn.net/detail/u011368821/7951657 实验材料: http://downlo ...
- mysql 多个字段拼接
Mysql的查询结果行字段拼接,能够用以下两个函数实现: 1. concat函数 mysql> select concat('1','2','3') from test ; +--------- ...
- 大约SQL现场“这包括”与“包括在”字符串的写法
1.字段查找表值"这包括"方法一字符串的所有记录 如果表中有一name场,查询name这包括"乔 - 史密斯"所有记录.能够写sql: Stirng st ...
- hdu 5074 相邻的和最大dp
http://acm.hdu.edu.cn/showproblem.php?pid=5074 给定一个序列 有些位数未知,给你全部两个数连续所得到的能量.问你怎么安排数字使得总能量最大 二维dp,dp ...
- 妙用perfmon Alert抓dump
抓dump文件,经常是解决众多疑难杂症的不二手段.但是很多时候,我们没办法抓.比如说 几秒内的线程数暴涨200个,然后迅速回落 程序跑了两天,内存涨到某个数字就自己OOM了 原因不外乎都是时间短,没有 ...
- Chapter 1 Securing Your Server and Network(3):使用托管服务帐号
原文:Chapter 1 Securing Your Server and Network(3):使用托管服务帐号 原文出处:http://blog.csdn.net/dba_huangzj/arti ...
- 【Java基础】System.arraycopy()的使用详解
由于在Java中System.arraycopy()方法在一维数组和二维数组中的表现不同,所以做了一个测试 public static void main(String[] args) { int[] ...