CSS制作图形变形弹出效果的示例分享

时间：2021-05-08

弹出窗体是网页常用的一个交互设计，在这个注重交互动画体验的时代，网页弹窗也可以来点新鲜的点子，比如今天分享的CSS 变形Modal Window。

当用户点击按钮时，按钮将会变成一个全屏的屏幕，然后再显示内容，整个展示过程流畅友好，也许你可以尝试到你的新项目上。

演示页：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复制内容到剪贴板
  • <sectionclass="cd-section">
  • <!--sectioncontenthere-->
  • <divclass="cd-modal-action">
  • <ahref="#0"class="btn"data-type="modal-trigger">FireModalWindow</a><!—这是窗体按钮-->
  • <spanclass="cd-modal-bg"></span>
  • </div>
  • <divclass="cd-modal">
  • <divclass="cd-modal-content">
  • <!—这是窗体内容区域-->
  • </div>
  • </div>
  • <ahref="#0"class="cd-modal-close">Close</a><!—这是关闭按钮-->
  • </section>

    • STEP 2: 添加CSS样式

    CSS Code复制内容到剪贴板
  • .cd-modal-action{
  • position:relative;
  • }
  • .cd-modal-action.btn{
  • width:12.5em;
  • height:4em;
  • background-color:#123758;
  • border-radius:5em;
  • transition:color0.2s0.3s,width0.3s0s;
  • }
  • .cd-modal-action.btn.to-circle{
  • width:4em;
  • color:transparent;
  • transition:color0.2s0s,width0.3s0.2s;
  • }
  • .cd-modal-action.cd-modal-bg{
  • position:absolute;
  • top:0;
  • left:50%;
  • transform:translateX(-2em);
  • width:4em;
  • height:4em;
  • background-color:#123758;
  • border-radius:50%;
  • opacity:0;
  • visibility:hidden;
  • transition:visibility0s0.5s;
  • }
  • .cd-modal-action.cd-modal-bg.is-visible{
  • opacity:1;
  • visibility:visible;
  • }

    • STEP 3: 添加jQuery

    本代码使用了jQuery，你可以通过下面代码来修改窗口大小。

    JavaScript Code复制内容到剪贴板
  • varbtnRadius=$('.cd-modal-bg').width()/2,
  • left=$('.cd-modal-bg').offset().left+btnRadius,
  • top=$('.cd-modal-bg').offset().top+btnRadius-$(window).scrollTop(),
  • scale=scaleValue(top,left,btnRadius,$(window).height(),$(window).width());
  • functionscaleValue(topValue,leftValue,radiusValue,windowW,windowH){
  • varmaxDistHor=(leftValue>windowW/2)?leftValue:(windowW-leftValue),
  • maxDistVert=(topValue>windowH/2)?topValue:(windowH-topValue);
  • returnMath.ceil(Math.sqrt(Math.pow(maxDistHor,2)+Math.pow(maxDistVert,2))/radiusValue);
  • }

    • 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章