炫酷CSS3登录界面jQuery特效

创客云


这是一款超炫酷jQuery和CSS3登录界面设计。在该登录界面中,登录框被聚焦或鼠标移动到关闭按钮,以及关闭登录框时,都会有炫酷的动画效果。

使用方法

在页面中引入下面的文件。

  1. <link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
  2. <script src="assets/js/jquery-1.11.0.min.js"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  4. <script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
  5. <script src="assets/js/demo.js"></script>

HTML结构

登录界面的HTML结构如下。

  1. <div class="modal invisible">
  2.   <div class="monster-open-close" style="background-image: url(assets/img/m-open-close.png)"></div>
  3.   <div class="modal-inner" style="background-image: url(assets/img/landscape.png);">
  4.     <p class="close"><span></span></p>
  5.     <div class="modal-body">
  6.       <div class="monster-close" style="background-image: url(assets/img/m-close.png)"><span>Are you sure?</span></div>
  7.       <h2>Stay up-to-date with our campaign</h2>
  8.  
  9.       <ul>
  10.         <li>Latest news</li>
  11.         <li>Promise no spam!</li>
  12.       </ul>
  13.  
  14.       <div class="form">
  15.         <div class="form-holder">
  16.  
  17.           <div class="monster-signup"><span style="background-image: url(assets/img/m-signup.png)"></span></div>
  18.  
  19.           <div class="form-holder-inner">
  20.             <form>
  21.               <div class="group">
  22.                 <input type="text" name="email" id="email" placeholder="Your email" autocomplete="off" required>
  23.               </div>
  24.  
  25.               <div class="submit">
  26.                 <input type="submit" class="submit-btn" value="Sign up" disabled="disabled">
  27.               </div>
  28.             </form>
  29.             <div class="thank-you-holder">
  30.               <span>Thank You, Human!</span>
  31.             </div>
  32.           </div>
  33.  
  34.         </div>
  35.       </div>
  36.  
  37.     </div>
  38.  
  39.   </div>
  40.  
  41. </div>
  42. <section class="trigger">
  43.   <h1>Stay up-to-date with our campaign</h1>
  44.   <button id="button">SIGN UP</button>
  45. </section>

Github网址:https://github.com/COIDEAwebsite/interactive-modal-with-funny-animations

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/46170.html
云模板

发表评论