大家都知道，彈出窗體已經是現在網頁常用的一種交互設計，在這個注重交互動畫體驗的時代，網頁彈窗也是可以來點新鮮點子的，比如今天分享的CSS 變形Modal Window。
當用戶點擊按鈕時，按鈕將會變成一個全屏的屏幕，然后再顯示內容，整個展示過程流暢友好，也許你可以嘗試到你的新項目上。
點擊“Fire Modal Window”按鈕后，按鈕將會慢慢變大，直到整個屏幕。下面來個GIF演示：
使用教程
本代碼兼容Chrome, Firefox, Safari, Opera，而IE需要9.0或以上版本(IE9+)
STEP 1: 創建HTML布局
Fire Modal Window
Close
Fire Modal Window
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/
)
