布局框架

炫酷CSS3登录界面jQuery特效

面包多

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

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!