本文主要包含css3发光,搜索表单等相关知识,佚名 希望在学习及工作中可以帮助到您
先来看一下效果图:
图上的搜索框在被激活的时候会出现闪闪发光的特效。
下面我们来一起看看源代码。
HTML代码非常简单,一个文本框和一个提交按钮:
然后重点就是CSS3代码了,首先是对搜索框和搜索按钮的样式进行初始化,为了配合背景能出现发光的效果,我们对它们的样式作了如下设置:
然后就是利用glow属性,进行发光效果渲染,为了适应不同内核的浏览器,我们分别对其做了如下设置:
}</p>
<p>@-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