CSS制做图型形变弹出实际效果的示例共享

2021-01-20 06:23 jianzhan

弹出窗体是网页页面常见的1个互动设计方案,在这个重视互动动漫体验的时期,网页页面弹窗还可以来点新鮮的点子,例如今日共享的CSS 形变Modal Window。

当客户点一下按钮时,按钮可能变为1个全屏的显示屏,随后再显示信息內容,全部展现全过程顺畅友善,或许你能够尝试到你的最新项目上。

演试页:http://codyhouse.co/gem/morphing-modal-window/
点一下“Fire Modal Window”按钮后,按钮可能渐渐地增大,直至全部显示屏。下面来个GIF演试:

应用实例教程

本编码适配Chrome, Firefox, Safari, Opera,而IE必须9.0或以上版本号(IE9+)

STEP 1: 建立HTML合理布局

XML/HTML Code拷贝內容到剪贴板
  1. <section class="cd-section">  
  2. <!-- section content here -->  
  3.   
  4. <div class="cd-modal-action">  
  5. <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <!— 这是窗体按钮 -->  
  6. <span class="cd-modal-bg"></span>  
  7. </div>  
  8.   
  9. <div class="cd-modal">  
  10. <div class="cd-modal-content">  
  11. <!— 这是窗身体容地区 -->  
  12. </div>  
  13. </div>  
  14.   
  15. <a href="#0" class="cd-modal-close">Close</a> <!— 这是关掉按钮 -->  
  16. </section>  

STEP 2: 加上CSS款式

CSS Code拷贝內容到剪贴板
  1. .cd-modal-action {   
  2. positionrelative;   
  3. }   
  4. .cd-modal-action .btn {   
  5. width: 12.5em;   
  6. height: 4em;   
  7. background-color#123758;   
  8. border-radius: 5em;   
  9. transition: color 0.2s 0.3s, width 0.3s 0s;   
  10. }   
  11. .cd-modal-action .btn.to-circle {   
  12. width: 4em;   
  13. colortransparent;   
  14. transition: color 0.2s 0s, width 0.3s 0.2s;   
  15. }   
  16. .cd-modal-action .cd-modal-bg {   
  17. positionabsolute;   
  18. top: 0;   
  19. left: 50%;   
  20. transform: translateX(⑵em);   
  21. width: 4em;   
  22. height: 4em;   
  23. background-color#123758;   
  24. border-radius: 50%;   
  25. opacity: 0;   
  26. visibilityhidden;   
  27. transition: visibility 0s 0.5s;   
  28. }   
  29. .cd-modal-action .cd-modal-bg.is-visible {   
  30. opacity: 1;   
  31. visibilityvisible;   
  32. }  

STEP 3: 加上jQuery

本编码应用了jQuery,你能够根据下面编码来改动对话框尺寸。

JavaScript Code拷贝內容到剪贴板
  1. var btnRadius = $('.cd-modal-bg').width()/2,   
  2. left = $('.cd-modal-bg').offset().left + btnRadius,   
  3. top = $('.cd-modal-bg').offset().top + btnRadius - $(window).scrollTop(),   
  4. scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());   
  5.   
  6. function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {   
  7. var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),   
  8. maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);   
  9. return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);   
  10. }