html 页面屏幕变形,未来的网页弹窗可能是这样子 CSS变形弹窗效果

未来的网页弹窗可能是这样子 CSS变形弹窗效果

Sponsor

弹出窗体是网页常用的一个交互设计，在这个注重交互动画体验的时代，网页弹窗也可以来点新鲜的点子，比如今天分享的CSS 变形Modal Window。

当用户点击按钮时，按钮将会变成一个全屏的屏幕，然后再显示内容，整个展示过程流畅友好，也许你可以尝试到你的新项目上。

点击“Fire Modal Window”按钮后，按钮将会慢慢变大，直到整个屏幕。下面来个GIF演示：

使用教程

本代码兼容Chrome, Firefox, Safari, Opera，而IE需要9.0或以上版本(IE9+)

STEP 1: 创建HTML布局

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;

}

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

}

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

别闹了昆汀 -

2015 年 03 月 04 日 下午 12:12

google~

Desgard_Duan -

2015 年 02 月 04 日 下午 12:00

好棒！

别葬花香 -

2015 年 02 月 02 日 下午 4:32

厉害

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站