jQuery熱氣球動(dòng)畫半透明背景的后臺(tái)登錄界面代碼分享
本文實(shí)例講述了jQuery實(shí)現(xiàn)熱氣球動(dòng)畫背景登錄框。分享給大家供大家參考。具體如下:
jQuery熱氣球動(dòng)畫背景登錄框是一款動(dòng)態(tài)半透明背景的后臺(tái)登錄界面樣式效果代碼。頁面效果簡潔大方,是一款非常實(shí)用的特效代碼,值得大家學(xué)習(xí)。
運(yùn)行效果圖:-------------------查看效果 下載源碼-------------------
小提示:瀏覽器中如果不能正常運(yùn)行,可以嘗試切換瀏覽模式。
為大家分享的jQuery實(shí)現(xiàn)熱氣球動(dòng)畫背景登錄框代碼如下
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery熱氣球動(dòng)畫背景登錄框</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="login"> <div class="box png"> <div class="logo png"></div> <div class="input"> <div class="log"> <div class="name"> <label>用戶名</label><input type="text" class="text" id="value_1" placeholder="用戶名" name="value_1" tabindex="1"> </div> <div class="pwd"> <label>密 碼</label><input type="password" class="text" id="value_2" placeholder="密碼" name="value_2" tabindex="2"> <input type="button" class="submit" tabindex="3" value="登錄"> <div class="check"></div> </div> <div class="tip"></div> </div> </div> </div> <div class="air-balloon ab-1 png"></div> <div class="air-balloon ab-2 png"></div> <div class="footer"></div> </div> <script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript" src="js/fun.base.js"></script> <script type="text/javascript" src="js/script.js"></script> <!--[if IE 6]> <script src="js/DD_belatedPNG.js" type="text/javascript"></script> <script>DD_belatedPNG.fix('.png')</script> <![endif]--> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
以上就是為大家分享的jQuery實(shí)現(xiàn)熱氣球動(dòng)畫背景登錄框代碼,希望大家可以喜歡。
- jquery實(shí)現(xiàn)動(dòng)畫菜單的左右滾動(dòng)、漸變及圖形背景滾動(dòng)等效果
- 基于jquery的direction圖片漸變動(dòng)畫效果
- jQuery與js實(shí)現(xiàn)顏色漸變的方法
- jQuery實(shí)現(xiàn)的文字hover顏色漸變效果實(shí)例
- jQuery animate()實(shí)現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
- JQuery動(dòng)畫animate的stop方法使用詳解
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫和進(jìn)度條插件
- jQuery實(shí)現(xiàn)加入購物車飛入動(dòng)畫效果
- jQuery動(dòng)畫與特效詳解
- JQuery 動(dòng)畫卷頁 返回頂部 動(dòng)畫特效(兼容Chrome)
- jQuery下的動(dòng)畫處理總結(jié)
- jQuery實(shí)現(xiàn)的背景顏色漸變動(dòng)畫效果示例
相關(guān)文章
jquery tools系列 overlay 學(xué)習(xí)
接著上次scrollable的學(xué)習(xí),今天繼續(xù)jquery tools六大功能的第四個(gè)功能——overlay的學(xué)習(xí)。2009-09-09jQuery插件artDialog.js使用與關(guān)閉方法示例
這篇文章主要介紹了jQuery插件artDialog.js使用與關(guān)閉方法,結(jié)合具體實(shí)例形式分析了jQuery彈出窗口插件artDialog.js的簡單使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10ASP.NET jQuery 實(shí)例8 (動(dòng)態(tài)添加內(nèi)容到DropDownList)
在web應(yīng)用里,我們經(jīng)常需要通過其他控件的事件觸發(fā)動(dòng)態(tài)構(gòu)造DropDownList數(shù)據(jù)內(nèi)容。在這節(jié)中,我們將會(huì)看到如何實(shí)現(xiàn)通過選擇第一個(gè)下來框的內(nèi)容來動(dòng)態(tài)構(gòu)造第二個(gè)下拉框的內(nèi)容2012-02-02給jqGrid數(shù)據(jù)行添加修改和刪除操作鏈接(之一)
我這里用的不是jqGrid的自帶的編輯和刪除操作,我已經(jīng)把分頁導(dǎo)航欄下的編輯,刪除,搜索都取消掉了2011-11-11jQuery簡單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法,涉及jQuery的ajax調(diào)用及頁面樣式操作技巧,需要的朋友可以參考下2016-03-03jQuery實(shí)現(xiàn)布局高寬自適應(yīng)的簡單實(shí)例
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)布局高寬自適應(yīng)的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05jQuery實(shí)現(xiàn)的電子時(shí)鐘效果完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的電子時(shí)鐘效果,結(jié)合完整實(shí)例形式分析了jQuery日期與時(shí)間操作技巧與相關(guān)函數(shù)使用注意事項(xiàng),需要的朋友可以參考下2018-04-04