用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.