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 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
javascript 用函数实现继承详解
May 28 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
详解vue项目打包步骤
Mar 29 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 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
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
JavaScript DOM基础
2015/04/13 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
详解Python中的变量及其命名和打印
2016/03/11 Python
深入理解python try异常处理机制
2016/06/01 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python实现基于POS算法的区块链
2018/08/07 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
优秀女职工事迹材料
2014/02/06 职场文书
感恩节活动策划方案
2014/05/16 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
社团招新宣传语
2015/07/13 职场文书
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers