96      人物

另類彈窗效果-CSS變形彈窗效果

大家都知道，彈出窗體已經是現在網頁常用的一種交互設計，在這個注重交互動畫體驗的時代，網頁彈窗也是可以來點新鮮點子的，比如今天分享的CSS 變形Modal Window。

當用戶點擊按鈕時，按鈕將會變成一個全屏的屏幕，然後再顯示內容，整個展示過程流暢友好，也許你可以嚐試到你的新項目上。

演示頁：https://codyhouse.co/gem/morphing-modal-window/

點擊“Fire Modal Window”按鈕後，按鈕將會慢慢變大，直到整個屏幕。下麵來個GIF演示：

使用教程

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

STEP 1: 創建HTML布局

<section >
<!-- section content here -->

<div >
<a href="#0" data-type="modal-trigger">Fire Modal Window</a> <!— 這是窗體按鈕 -->
<span ></span>
</div>

<div >
<div >
<!— 這是窗體內容區域 -->
</div>
</div>

<a href="#0" >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變形彈窗效果源碼：https://codyhouse.co/gem/morphing-modal-window/

最後更新：2017-11-09 14:06:14

  上一篇：  GFW防禦升級，開始封殺 VPN

  下一篇：  香蕉也能變成藝術品