동적 배경 로그인 box_form 효과를 구현하는 CSS3 코드

CSS3 동적 배경 로그인 상자 코드를 기반으로 합니다. 이것은 jQuery 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를 기반으로 한 애니메이션 효과가 포함된 동적 배경 로그인 상자 특수 효과를 소개합니다.