您现在的位置是：网站首页> 编程资料编程资料

CSS制作图形变形弹出效果的示例分享纯CSS3绘制的中国联通动态logo图标样式源码使用CSS3编写类似iOS中的复选框及带开关的按钮详解CSS的Sass框架中代码注释的编写方法详解CSS中的flex容器与flex属性基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南深入剖析CSS变形transform(3d)CSS3实现的页面加载中动画过度特效源码纯CSS3简单的滑动开关按钮特效源码HTML5+CSS3图片堆叠转瀑布流布局特效源码

2021-09-05 1267人已围观

简介这篇文章主要介绍了一个CSS制作图形变形弹出效果的示例分享,弹出窗的大小可以使用jQuery来修改,需要的朋友可以参考下

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

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

201647140742917.png (500×341)

演示页：http://codyhouse.co/gem/morphing-modal-window/
点击“Fire Modal Window”按钮后，按钮将会慢慢变大，直到整个屏幕。下面来个GIF演示：
201647140900986.gif (500×493)

使用教程

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

STEP 1: 创建HTML布局

XML/HTML Code复制内容到剪贴板

STEP 2: 添加CSS样式

CSS Code复制内容到剪贴板

STEP 3: 添加jQuery

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

JavaScript Code复制内容到剪贴板

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