您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > TAB表单 >

    创建一个霓虹灯闪烁效果的表单

    时间:2014-05-27 15:36 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印
    效果预览 进入下载地址列表

    How cool will it be to have a glowing blink effect behind your input boxes in a form without using Flash? Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery! In this tutorial, I will show you how to build a nifty effect to enhance your forms.

    Note: In this tutorial, we have made use of @-webkit-keyframes which works only in browsers using the Webkit layout engine like Chrome and Safari. For browsers like Firefox and Opera, where there is no alternative, we will have to gracefully degrade the effect, which in this case will be just a box-shadow on focus. Internet Explorer (till version 8) cannot render most of what we will learn here, but IE 9 does seem to be very promising from what I’ve seen in the recent platform preview.

    You can see the live demo of what we are going to build here. The source code of our experiment is also available here to download.

    This is how the form will look after we complete building it:
    Overall Look

    Step 1: Before We Start Coding Away

    Make sure you download the latest release of jQuery (version 1.4.2 at the time of writing), if you feel the need for a local copy, otherwise one always has the option of using the Google API(if working online), in this case the AJAX libraries. To include the latest release under the “1″ branch, add the following line of code in the head tag above all the other scripts which make use of jQuery.

    1 <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    This line fetches the latest version under the “1″ branch. To be more specific, that is if you want the latest version under “1.4″ branch, just change the “1″ to “1.4″. In my code, I’ve made use of a local copy of jQuery 1.4.2, which I’ve provided in the source files.

    The naming of the files is as follows:

    • xHTML file: index.html
    • CSS file: style.css
    • Javascript file: highlight.js

    Put all the files in the same folder, along with the local copy of jQuery (if any), if you are following the exact code I’ve written. Let’s begin!

    Step 2: Creating the Form Layout in xHTML

    The next step would be to create the form layout in xHTML. Following are the contents of index.html


    创建一个霓虹灯闪烁效果的表单由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/tab/8079.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!
    标签:网站源码