用CSS3动画特效实现弹窗效果.docVIP

用CSS3动画特效实现弹窗效果 提示：如果大家觉得本篇实现的弹窗效果有用，可持续关注。接下会添加更多效果并且封装成插件，这样使用就方便了。效果查看： https://heavis.github.io/hidialog/index.html CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式：过渡、动画、变化。当用户和界面元素交互时，使用这些特殊样式可大大改善用户的体验效果。这些效果直接由浏览器引擎处理，可以节省开销。尽管如此，它们也会耗费大量的处理能力，尤其是一些复杂的WEB页面上。即使是最基本的效果，也是如此。本篇的目的只是熟悉下这三种CSS处理效果，不推荐在实际系统中大篇幅使用。 温馨提示：请谨慎大篇幅使用这些特殊效果。 另外一方面，由于在CCS3标准化之前，主流浏览器都是通过添加厂商前缀方式提供样式支持。所以要解决浏览器兼容问题，使用这些样式，我们不得不为每一个样式添加各个产商前缀，例如添加一个过度延迟属性transition-delay，不得不这样写： -webkit-transition-delay: 300ms; -o-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; transition-delay: 300ms; 代码量增加，不利于阅读。 最终效果 先看看最终实现的效果： dialog 效果比较简单，包括以下几点： 窗口透明度发生变化,从最初的0渐变到1。 窗口位置从浏览器底部渐变到浏览器居中位置。 窗口有一个90度的翻转效果。 窗口有遮挡层，弹窗时，遮挡层透明度从0渐变到0.7。 窗口关闭时所有动画反向执行。 弹窗布局 首先实现弹出窗口样式，弹窗在浏览器可见窗口显示，所有需要设置position为fixed。窗口容器样式如下： 复制代码 .dialog-root{ position: fixed; z-index: 2000; left: 50%; top: 50%; transform: translate(-50%, -50%); } 复制代码 直接设置left和top为50%可让元素左上角原点在浏览器居中，但是我们要以窗口的中心位置作为原点，使用CSS变换特效(transform)的平移translate函数可达到目的。这里补充下变换效果有哪些函数： translate(x, y)（长度值或者百分比）：在水平方向、垂直方向平移元素。 translateX(value)：水平方向平移。 translateY(value)：垂直方向平移。 scale(x, y)、scaleX(value)、scaleY(value)：在水平方向、垂直方向或者两个方向上缩放元素。 rotate()、rotateX()、rotateY()、rotateZ()：rotate支持3D效果，可在x、y、z轴上旋转元素。 skew()、skewX()、skewY()：在水平方向、垂直方向或者两个方向倾斜一定的角度。 窗口布局完整样式： 复制代码 html lang=en head meta charset=UTF-8 titleCSS特殊效果/title style tpe=text/css /* ---------------------公共样式 -------------------*/ body{ background: #000; } p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } a, button{ outline: none; } button {