大家都知道，彈出窗體已經是現在網頁常用的一種交互設計，在這個注重交互動畫體驗的時代，網頁彈窗也是可以來點新鮮點子的，比如今天分享的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/

總結

以上是生活随笔為你收集整理的php中修改弹窗的样式,CSS变形弹窗效果示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。