弹出窗体是网页常用的一个交互设计，在这个注重交互动画体验的时代，网页弹窗也可以来点新鲜的点子，比如今天分享的CSS 变形Modal Window。
当用户点击按钮时，按钮将会变成一个全屏的屏幕，然后再显示内容，整个展示过程流畅友好，也许你可以尝试到你的新项目上。
演示页：http://codyhouse.co/gem/morphing-modal-window/
点击“Fire Modal Window”按钮后，按钮将会慢慢变大，直到整个屏幕。下面来个GIF演示：
使用教程
本代码兼容Chrome, Firefox, Safari, Opera，而IE需要9.0或以上版本（IE9+）
STEP 1: 创建HTML布局
XML/HTML Code复制内容到剪贴板
<section class="cd-section">
<!– section content here –>
<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">
<!— 这是窗体内容区域 –>
</div>
</div>
<a href="#0" class="cd-modal-close">Close</a> <!— 这是关闭按钮 –>
</section>
STEP 2: 添加CSS样式
CSS Code复制内容到剪贴板
.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%;
