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

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

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

使用教程

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

STEP 1: 创建HTML布局

Close

Close

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;

}

.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);

}

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/