Heim > Artikel > Web-Frontend > jQuery-Heißluftballon-Animation, durchscheinender Hintergrund, Anmeldeschnittstellencode, Sharing_jquery

jQuery-Heißluftballon-Animation, durchscheinender Hintergrund, Anmeldeschnittstellencode, Sharing_jquery

WBOYOriginal: 2016-05-16 15:41:461480Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierung des Anmeldefelds für den Hintergrund einer Heißluftballonanimation mit jQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Das Hintergrund-Anmeldefeld für die jQuery-Heißluftballonanimation ist ein Effektcode im Hintergrund-Anmeldeschnittstellenstil mit einem dynamischen durchscheinenden Hintergrund. Der Seiteneffekt ist einfach und elegant. Es handelt sich um einen sehr praktischen Spezialeffektcode, der es wert ist, erlernt zu werden.
Vorgangsrendering: -------------------Effekt anzeigen Quellcode herunterladen--------- - --------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Die jQuery-Implementierung des mit Ihnen geteilten Login-Box-Codes für den Hintergrund der Heißluftballon-Animation lautet wie folgt

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

Das Obige ist die jQuery-Implementierung des Hintergrund-Login-Box-Codes für Heißluftballons. Ich hoffe, es gefällt Ihnen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js implementiert horizontal erweiterte sekundäre Navigationsmenü-Code_Javascript-FähigkeitenNächster Artikel：js implementiert horizontal erweiterte sekundäre Navigationsmenü-Code_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen