CSS制作图形变形弹出效果的示例分享

我双手接过晶莹的雪花，想数一数它有几朵花瓣，谁知它到手上就不见了，变成了小水珠。

弹出窗体是网页常用的一个交互设计，在这个注重交互动画体验的时代，网页弹窗也可以来点新鲜的点子，比如今天分享的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复制内容到剪贴板

<sectionclass="cd-section">
<divclass="cd-modal-action">
<arel="nofollow noopener noreferrer" href="#0"class="btn"data-type="modal-trigger">FireModalWindow</a><!—这是窗体按钮-->
<spanclass="cd-modal-bg"></span>
</div>
<divclass="cd-modal">
<divclass="cd-modal-content">
<!—这是窗体内容区域-->
</div>
</div>
<arel="nofollow noopener noreferrer" href="#0"class="cd-modal-close">Close</a><!—这是关闭按钮-->
</section>

STEP 2: 添加CSS样式

CSS Code复制内容到剪贴板

STEP 3: 添加jQuery

本代码使用了jQuery，你可以通过下面代码来修改窗口大小。

JavaScript Code复制内容到剪贴板

varbtnRadius=$('.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());
functionscaleValue(topValue,leftValue,radiusValue,windowW,windowH){
varmaxDistHor=(leftValue>windowW/2)?leftValue:(windowW-leftValue),
maxDistVert=(topValue>windowH/2)?topValue:(windowH-topValue);
returnMath.ceil(Math.sqrt(Math.pow(maxDistHor,2)+Math.pow(maxDistVert,2))/radiusValue);
}

以上就是CSS制作图形变形弹出效果的示例分享。阳光暖一点，再暖一点，日子慢一些，再慢一些。晚安！更多关于CSS制作图形变形弹出效果的示例分享请关注haodaima.com其它相关文章！

全站频道