欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS3实现动态背景登录框的代码

程序员文章站 2023-11-12 23:53:40
基于css3动态背景登录框代码。这是一款基于jquery+css3实现的带有动画效果的动态背景登陆框特效。效果图如下:实现的代码如下:html代码:

基于css3动态背景登录框代码。这是一款基于jquery+css3实现的带有动画效果的动态背景登陆框特效。效果图如下:

CSS3实现动态背景登录框的代码

实现的代码如下:

html代码:

<div class="htmleaf-container">
    <div class="wrapper">
      <div class="container">
        <h1>welcome</h1>

        <form class="form">
          <input type="text" placeholder="username">
          <input type="password" placeholder="password">
          <button type="submit" id="login-button">login</button>
        </form>
      </div>

      <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

  <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script>
    $('#login-button').click(function (event) {
      event.preventdefault();
      $('form').fadeout(500);
      $('.wrapper').addclass('form-success');
    });
  </script>

本文介绍的这款基于jquery+css3实现的带有动画效果的动态背景登陆框特效,希望大家可以喜欢。

相关标签: css3