CSS制作圖形變形彈出效果的示例分享

設(shè)計(jì)達(dá)人 發(fā)布時(shí)間：2016-04-07 14:03:48 作者：佚名

這篇文章主要介紹了一個(gè)CSS制作圖形變形彈出效果的示例分享,彈出窗的大小可以使用jQuery來(lái)修改,需要的朋友可以參考下

彈出窗體是網(wǎng)頁(yè)常用的一個(gè)交互設(shè)計(jì)，在這個(gè)注重交互動(dòng)畫體驗(yàn)的時(shí)代，網(wǎng)頁(yè)彈窗也可以來(lái)點(diǎn)新鮮的點(diǎn)子，比如今天分享的CSS 變形Modal Window。
201647140715051.png (500×266)

當(dāng)用戶點(diǎn)擊按鈕時(shí)，按鈕將會(huì)變成一個(gè)全屏的屏幕，然后再顯示內(nèi)容，整個(gè)展示過(guò)程流暢友好，也許你可以嘗試到你的新項(xiàng)目上。

201647140742917.png (500×341)

演示頁(yè)：http://codyhouse.co/gem/morphing-modal-window/
點(diǎn)擊“Fire Modal Window”按鈕后，按鈕將會(huì)慢慢變大，直到整個(gè)屏幕。下面來(lái)個(gè)GIF演示：
201647140900986.gif (500×493)

使用教程

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

STEP 1: 創(chuàng)建HTML布局

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<section class="cd-section">
<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">
<!— 這是窗體內(nèi)容區(qū)域 -->
</div>
</div>
<a href="#0" class="cd-modal-close">Close</a> <!— 這是關(guān)閉按鈕 -->
</section>

STEP 2: 添加CSS樣式

CSS Code復(fù)制內(nèi)容到剪貼板

.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，你可以通過(guò)下面代碼來(lái)修改窗口大小。

JavaScript Code復(fù)制內(nèi)容到剪貼板

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