各位网友,大家好,我是陌上花会开,今天这个案例,我将带领大家,手把手教大家开发一个会发光的表单组,还是先秀运行效果图吧:
从这个效果图,大家可以发现,当光标在某个组件上时,它就会发光,今天我将带领大家实战开发这个特效。
PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效果。
首先,我们先准备好html代码:
<!doctype html> <html> <head> <meta charset="utf-8"><meta name="keywords" content="css3教程,css3实战开发,css3案例,css3特效,互联网" > <link rel="stylesheet" href="styles.css"> <title>CSS3实战开发之发光控件的实现</title> </head> <body> <div class="container"> <form method="post" action="http://www.itdriver.cn"> <div class="input-group"> <input type="text" placeholder="请告诉我,你在寻找什么" > <span class="input-group-btn"> <button class="btn" type="submit">立即搜索</button> </span> </div> </form> </div> </body> </html>
此时,我们先看一下此时未加样式时的运行效果:
接着我们再设置页面外部容器的样式:
@charset "utf-8"; *{ /*清除所有元素默认内边距和外边距*/ padding:0; margin:0; } /* 设置外部容器样式 开始 */ .container{ width:80%; margin:auto; } .container form{ margin:10em; } form { font-size:.8em; } /* 设置外部容器样式 结束 *
在修改完表单布局以及内外边距后,我们再设置表单组input-group及其内部元素的样式:
.input-group input { /*设置表单组中输入框的样式*/ height:3em; line-height:3em; width:20em; border:1px solid #cccccc; border-top-left-radius:1.5em; border-bottom-left-radius:1.5em; padding-left:1.2em; } .btn{ /* 设置按钮样式的内边距 */ padding:0 .5em; } .input-group .input-group-btn .btn{ /* 设置表单组中按钮的样式 */ height:3.12em; border:1px solid #cccccc; border-top-right-radius:1.5em; border-bottom-right-radius:1.5em; border-left:none; } /*设置表单组元素统一向左浮动*/ .input-group input,.input-group button{ float:left; }
此时我们来预览一下表单应用样式后的效果:
从效果图我们可以发现,搜索表单组的样式已经出来了,但是并不是我们期待的发光效果。
我们要知道如果单凭CSS2或CSS1,是实现不了发光动画效果的,这个时候我们可以借助CSS3的动画效果。
现在我们利用CSS3新增动画特性,定义动画帧:
/* 定义动画帧 开始 */ @-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; }
至此,《搜索表单发光特效》的代码已经讲解完了。再来看下效果:
大家说是不是很简单呢? 我们很多人可能知识点掌握的不少,只是不知道怎么来用。
好,请大家继续关注我的博客,我会不断地教大家如何将这些知识点串起来,来开发实战性的应用。
往期精彩实战开发案例一览(已被广为转载,下面只列出部分):
1. 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》
3. 《CSS3 2D转换之translate技术详解 及 网页导航实战开发》
5. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》
6. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》
欢迎大家加入互联网技术交流群:62329335
相关推荐
HTML5+CSS3小实例:纯CSS实现文字组成肖像特效
【CSS3地图坐标点闪烁发光特效】是一种在网页设计中常用的技术,主要通过CSS3的动画和过渡属性来实现。这种特效通常用于吸引用户的注意力,比如在地图应用中标识特定位置或者在数据可视化中强调重要节点。下面我们将...
在本文中,我们将深入探讨如何使用...如果你拥有这个文件,可以打开并查看源代码,以便更深入地学习和理解CSS3发光特效的实现方式。在实践中,不断尝试和调整这些样式,你将能够创造出更多独特且引人注目的视觉效果。
"Web设计:HTML5和CSS3实战.pdf"这本书很可能是深入探讨这两个主题的实战指南,包括实际案例、示例代码和最佳实践,有助于读者将理论知识转化为实际操作技能,进一步提升开发效率和网页设计水平。通过阅读这本书,...
这个“鼠标悬停css3发光效果特效”是一个利用CSS3技术实现的代码示例,旨在增强用户与网页元素之间的互动性,特别是对于图像或按钮等元素。 在CSS3中,我们可以使用多种属性来创建发光效果。首先,`box-shadow`是...
**jQuery+CSS3发光气泡上升动画特效** 在网页设计中,动态效果常常能吸引用户的注意力,提升用户体验。"jQuery+CSS3发光气泡上升动画特效"是一个将这两种技术结合运用的例子,它能够为网站增添视觉吸引力。在这个...
这款文字特效既有倒影的效果,又有随机的颜色,看起来非常的炫酷。全文基于 HTML5+CSS3 完成。 实现思路: 1. 使文字可以被编辑 2. 设置背景色,居中,样式调整 3. 设置投影效果 4. 字母转大写 5. 设置自定义属性 6....
本资源是一份名为《CSS3技巧大揭秘:打造精美的爱心SVG动画特效》的RAR压缩包,其中包含了一份详细的教程和相关的代码示例,旨在帮助读者学习如何使用CSS3技术打造出精美的爱心SVG动画特效。 适用人群:本资源适用...
2. **CSS3的渐变**:发光效果通常通过线性或径向渐变来实现。线性渐变允许我们定义颜色从一个方向平滑过渡到另一个方向,而径向渐变则从一个中心点向外扩散颜色。通过调整渐变角度和颜色 stops,我们可以创建出流星...
【标题】中的“纯CSS3实现的发光登录表单特效源码”指的是一个利用CSS3技术设计的登录表单,该表单具有独特的发光效果,增强了用户体验和视觉吸引力。CSS3是层叠样式表(Cascading Style Sheets)的第三版,提供了...
在本文中,我们将深入探讨如何使用CSS3来创建具有发光效果的按钮以及登录表单的特效。CSS3作为层叠样式表的最新版本,引入了许多强大的功能,包括过渡(transitions)、动画(animations)和边框半径(border-radius...
**jQuery和CSS3炫酷表单浮动标签特效详解** 在网页设计中,用户交互体验是至关重要的元素之一,其中表单的设计与交互性扮演着重要角色。浮动标签特效(Floating Label)是一种现代化的表单设计模式,它在用户输入时...
《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本,确保所讲解的内容...
【标题】"纯css3灯泡悬停发光特效.zip"所涉及的知识点主要集中在CSS3技术上,尤其是关于CSS3的动画(Animations)和过渡(Transitions)效果,以及选择器(Selectors)的使用。CSS3是层叠样式表的最新版本,提供了更...
此为《CSS3实战》的配套源码和插图,分三部分上传,此为第一部分。 《CSS3实战》由国内资深Web前端工程师撰写,权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者,那么《CSS 3实战》也许会让你在即将到来的Web...
标题中的“css3鼠标悬停按钮发光特效.zip”指的是一个包含CSS3技术实现的鼠标悬停时按钮产生发光效果的代码资源。这个特效是网页设计中常见的一种交互元素,能够提升用户界面的视觉吸引力和用户体验。 CSS3是层叠...
为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画、元素的变换。这些 CSS 新特性在现阶段可以说都是非常强大和...
《Web前端开发案例教程(HTML5+CSS3)(微课版)》是一份重要的教学资料,主要关注现代Web开发的基础技术,即HTML5和CSS3。这些技术是构建交互式、响应式和动态网页的核心工具。源代码的提供使得学习者能够深入理解...
【CSS3超酷模糊发光文字动画特效】是一种利用CSS3的强大功能来创建吸引人眼球的文字视觉效果的技术。在网页设计中,动态且引人注目的文字可以极大地提升用户体验,增加网站的吸引力。以下是对这个特效的详细解释: ...