CSS3有了三种特殊效果的处理方式:过渡(transition),动画(animation),变化(transform)。
CSS3标准化前,各主流浏览器靠前缀提供样式支持。
-webkit-transition-delay: 300ms;//webkit
-o-transition-delay: 300ms;//opera
-moz-transition-delay: 300ms;//moz
-ms-transition-delay: 300ms;
transition-delay: 300ms;
定义:
在 UI设计中,模态窗口是附属于主窗口的图形控制元素,它创建了一种状态模式,在这种状态模式下,主窗口无法被直接访问。当模态框出现之后,如果用户想要再回到主窗口操作,就必须先与模态框自身进行交互,也就是通过这样的形式中断了应用程序主窗口的正常工作流。
对话框一般分为两种类型:模态类型( modal )与非模态类型( modeless )。所谓模态对话框,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性,用户可以在当前对话框以及其他窗口间进行切换。
下面我们来实现一个模态窗口-「某种特定状态下的窗体」。
弹出窗口布局
弹窗在浏览器可见窗口可见,设置position:fixed
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():在水平方向、垂直方向或者两个方向倾斜一定的角度。
animation的属性有:
animation-name,animation-delay,animation-duration,animation-direction,animation-timing-function,animation-play-state;
通过设置动画关键帧,来实现模态框的弹出效果。
CSS部分:
.dialog-face {
position: fixed;
background: #cd8194;
height: 100%;
width: 100%;
opacity: 0.7;
}
/*------弹窗布局样式----------*/
.dialog-root{
position: fixed;
left: 50%;
top: 100%;
}
/*弹窗容器*/
.dialog-wrapper{
background: #cd8194;
width: 600px;
height: 400px;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
animation: dialogSlipToUP 500ms ease 1 forwards;//结束时保留最后一帧的状态
}
/*弹窗内容*/
.dialog-content{
font-size: 1.1em;
color:#fff;
}
/*透明度从0.3渐变到1并且元素从浏览器底部出现。*/
@keyframes dialogSlipToUP {
0%{
opacity: 0.3;
}
100%{
transform: translate(-50%,-100%);
opacity:1;
}
}
HTML部分:
<div class="dialog-face">
</div>
<div class="dialog-root">
<div class="dialog-wrapper">
<div class="dialog-content">
<p>This is a modal window.</p>
</div>
</div>
</div>