各位网友,大家好,我是陌上花会开,今天这个案例,我将带领大家,手把手教大家开发一个会发光的表单组,还是先秀运行效果图吧:
从这个效果图,大家可以发现,当光标在某个组件上时,它就会发光,今天我将带领大家实战开发这个特效。
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
相关推荐
《CSS3实战:开发与设计》书中所包含的示例的全部源码。 本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络...
HTML5+CSS3小实例:纯CSS实现文字组成肖像特效
CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,...
css3实战:开发与设计迷你书(1-3章)试读版,添加定位目录方便查阅
这款文字特效既有倒影的效果,又有随机的颜色,看起来非常的炫酷。全文基于 HTML5+CSS3 完成。 实现思路: 1. 使文字可以被编辑 2. 设置背景色,居中,样式调整 3. 设置投影效果 4. 字母转大写 5. 设置自定义属性 6....
本资源是一份名为《CSS3技巧大揭秘:打造精美的爱心SVG动画特效》的RAR压缩包,其中包含了一份详细的教程和相关的代码示例,旨在帮助读者学习如何使用CSS3技术打造出精美的爱心SVG动画特效。 适用人群:本资源适用...
此为《CSS3实战》的配套源码和插图,分三部分上传,此为第三部分。 《CSS3实战》由国内资深Web前端工程师撰写,权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者,那么《CSS 3实战》也许会让你在即将到来的Web...
《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本,确保所讲解的内容...
此为《CSS3实战》的配套源码和插图,分三部分上传,此为第一部分。 《CSS3实战》由国内资深Web前端工程师撰写,权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者,那么《CSS 3实战》也许会让你在即将到来的Web...
此为《CSS3实战》的配套源码和插图,分三部分上传,此为第二部分。 《CSS3实战》由国内资深Web前端工程师撰写,权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者,那么《CSS 3实战》也许会让你在即将到来的Web...
CSS3发光线条旋转加载动画特效是一款两条弧形发光彩色线条旋转动画特效。
CSS3实现烟花特效-图片+css
一款基于纯CSS3的发光按钮,按钮发光的颜色是随机的,这样一排按钮就显得五彩缤纷,非常绚丽。之前我们也介绍过不少样式很独特的CSS3按钮,比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等,都非常不错,也有HTML5...
之前我们已经介绍过两款CSS3 3D进度条插件了,CSS3 3D进度条...今天我再向大家分享一款CSS3 SVG动画进度条应用,进度条在进度加载中将会出现闪闪发光的炫酷特效,遗憾的是,需要高版本的HTML5浏览器才能支持发光动画。
一款使用HTML5 CSS3 Canvas技术打造的3D星空穿越动画特效,十分逼真,打开后会看到星空穿梭的效果,好像是站在太空船的舷窗前看到的效果,本例无使用任何的图片资源,纯CSS3效果实现的。
《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》epub版
html5和css3相互配合使用,能够更快速,代码更简洁易懂,便于开发者使用,节省开发时间。
萌翻少女心的发光果冻泡泡