用CSS3动画特效实现弹窗效果.docx
- 文档编号:29690347
- 上传时间:2023-07-26
- 格式:DOCX
- 页数:26
- 大小:20.62KB
用CSS3动画特效实现弹窗效果.docx
《用CSS3动画特效实现弹窗效果.docx》由会员分享,可在线阅读,更多相关《用CSS3动画特效实现弹窗效果.docx(26页珍藏版)》请在冰豆网上搜索。
用CSS3动画特效实现弹窗效果
用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():
在水平方向、垂直方向或者两个方向倾斜一定的角度。
窗口布局完整样式:
复制代码
/*---------------------公共样式-------------------*/
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{
border:
none;
padding:
0.6em1.2em;
background:
#c0392b;
color:
#fff;
font-size:
1em;
cursor:
pointer;
display:
block;
margin:
3pxauto;
border-radius:
2px;
}
button:
hover,button:
active,button:
focus{
border:
none;
}
/*---------------------弹窗样式-------------------*/
/*遮挡层样式*/
.dialog-face{
position:
fixed;
background:
#A02418;
height:
100%;
width:
100%;
z-index:
1000;
top:
0;
left:
0;
opacity:
0.7;
}
/*弹窗布局样式*/
.dialog-root{
position:
fixed;
z-index:
2000;
left:
50%;
top:
50%;
transform:
translate(-50%,-50%);
}
/*弹窗容器*/
.dialog-wrapper{
background:
#E74C3C;
width:
635px;
height:
375px;
overflow:
hidden;
-webkit-border-radius:
5px;
-moz-border-radius:
5px;
border-radius:
5px;
}
/*弹窗标题*/
.dialog-header{
height:
75px;
background:
#d94839;
text-align:
center;
}
.dialog-headerspan{
font-size:
28px;
line-height:
75px;
color:
#F6CBC6;
}
/*弹窗内容*/
.dialog-content{
font-weight:
300;
font-size:
1.15em;
color:
#fff;
padding:
15px40px20px40px;
margin:
0;
}
.dialog-contentp{
margin:
0;
padding:
10px0;
}
弹窗效果
Thisisamodalwindow.Youcandothefollowingthingswithit:
- Read:modalwindowswillprobablytellyousomethingimportantsodon'tforgettoreadwhattheysay.
- Look:amodalwindowenjoysacertainkindofattention;justlookatitandappreciateitspresence.
- Close:clickonthebuttonbelowtoclosethemodal.