转载

未来的网页弹窗可能是这样子 CSS变形弹窗效果

二月 2, 2015 发表于:HTML & CSS .评论

赞助商链接未来的网页弹窗可能是这样子 CSS变形弹窗效果

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

未来的网页弹窗可能是这样子 CSS变形弹窗效果

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

未来的网页弹窗可能是这样子 CSS变形弹窗效果

演示页： http://codyhouse.co/gem/morphing-modal-window/

点击“Fire Modal Window”按钮后，按钮将会慢慢变大，直到整个屏幕。下面来个GIF演示：

未来的网页弹窗可能是这样子 CSS变形弹窗效果

使用教程

本代码兼容Chrome, Firefox, Safari, Opera，而IE需要9.0或以上版本（IE9+）

STEP 1: 创建HTML布局

<section class="cd-section"> <!-- section content here -->  <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <!— 这是窗体按钮 --> <span class="cd-modal-bg"></span> </div>  <div class="cd-modal"> <div class="cd-modal-content"> <!— 这是窗体内容区域 --> </div> </div>  <a href="#0" class="cd-modal-close">Close</a> <!— 这是关闭按钮 --> </section>

STEP 2: 添加CSS样式

.cd-modal-action { position: relative; } .cd-modal-action .btn { width: 12.5em; height: 4em; background-color: #123758; border-radius: 5em; transition: color 0.2s 0.3s, width 0.3s 0s; } .cd-modal-action .btn.to-circle { width: 4em; color: transparent; transition: color 0.2s 0s, width 0.3s 0.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: visibility 0s 0.5s; } .cd-modal-action .cd-modal-bg.is-visible { opacity: 1; visibility: visible; }

STEP 3: 添加jQuery

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

var btnRadius = $('.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());  function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) { var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue), maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue); return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue); }

下载CSS变形弹窗效果源码： http://codyhouse.co/gem/morphing-modal-window/

交流：UI设计交流群：133654942（快速加入），与500名设计师交流设计，分享素材。

建议：看到好的文章或素材，记得分享到微博等媒体，让更多的朋友知道，也方便日后查阅。

正文到此结束