CSS中怎么實(shí)現(xiàn)一個(gè)圖形變形彈出效果，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，買友情鏈接，一元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。
彈出窗體是網(wǎng)頁常用的一個(gè)交互設(shè)計(jì)，在這個(gè)注重交互動(dòng)畫體驗(yàn)的時(shí)代，網(wǎng)頁彈窗也可以來點(diǎn)新鮮的點(diǎn)子，比如今天分享的CSS 變形Modal Window。
當(dāng)用戶點(diǎn)擊按鈕時(shí)，按鈕將會(huì)變成一個(gè)全屏的屏幕，然后再顯示內(nèi)容，整個(gè)展示過程流暢友好，也許你可以嘗試到你的新項(xiàng)目上。
演示頁：http://codyhouse.co/gem/morphing-modal-window/
點(diǎn)擊“Fire Modal Window”按鈕后，按鈕將會(huì)慢慢變大，直到整個(gè)屏幕。下面來個(gè)GIF演示：
使用教程
本代碼兼容Chrome, Firefox, Safari, Opera，而IE需要9.0或以上版本（IE9+）
STEP 1: 創(chuàng)建HTML布局
XML/HTML Code復(fù)制內(nèi)容到剪貼板
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，你可以通過下面代碼來修改窗口大小。
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);
}
關(guān)于CSS中怎么實(shí)現(xiàn)一個(gè)圖形變形彈出效果問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
重慶分公司
重慶分公司
