jQuery热气球动画半透明背景的后台登录界面代码分享


Posted in Javascript onAugust 28, 2015

本文实例讲述了jQuery实现热气球动画背景登录框。分享给大家供大家参考。具体如下:
jQuery热气球动画背景登录框是一款动态半透明背景的后台登录界面样式效果代码。页面效果简洁大方,是一款非常实用的特效代码,值得大家学习。
运行效果图:-------------------查看效果 下载源码-------------------

jQuery热气球动画半透明背景的后台登录界面代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery实现热气球动画背景登录框代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery热气球动画背景登录框</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实现热气球动画背景登录框代码,希望大家可以喜欢。

Javascript 相关文章推荐
javascript 一些用法小结
Sep 11 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
javascript数组includes、reduce的基本使用
Jul 02 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 #Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 #Javascript
js实现显示当前状态的导航效果代码
Aug 28 #Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 #Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 #Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 #Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 #Javascript
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php实现的Timer页面运行时间监测类
2014/09/24 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
js实现圆盘记速表
2015/08/03 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
python3.5仿微软计算器程序
2020/03/30 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
教师求职自荐信
2014/03/09 职场文书
安踏广告词改编版
2014/03/21 职场文书
本科生自荐信
2014/06/18 职场文书
置业顾问岗位职责
2015/02/09 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
使用Python解决图表与画布的间距问题
2022/04/11 Python
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS