search

Home >Web Front-end >JS Tutorial >jQuery hot air balloon animation translucent background background login interface code sharing_jquery

jQuery hot air balloon animation translucent background background login interface code sharing_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:461562browse

The example in this article describes the implementation of hot air balloon animation background login box with jQuery. Share it with everyone for your reference. The details are as follows:
The jQuery hot air balloon animation background login box is a background login interface style effect code with a dynamic translucent background. The page effect is simple and elegant. It is a very practical special effects code worth learning.
Operation rendering: -------------------View the effect Download the source code---------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The jQuery implementation of the hot air balloon animation background login box code shared with you is as follows 

<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>

The above is the jQuery implementation of the hot air balloon animation background login box code shared with you. I hope you like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js implements horizontally extending secondary navigation menu code_javascript skillsNext article：js implements horizontally extending secondary navigation menu code_javascript skills

Related articles

See more