dialog弹窗特效
2020-02-24 本文已影响0人
最好的自己_3d47
<style>
.popview{
display:none;
}
.popview,.popmask{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 999;
}
.popmask{
background-color: rgba(0,0,0,0.5);
}
.popview .poppanel{
position: fixed;
border-radius: 2px;
background-color: #fff;
top: 50%;
left: 50%;
z-index:1000;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 0s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@keyframes fadeIn{
0%{opacity:0}100%{opacity:1}
}
</style>
<html>
<div class="popview status_dialog success">
<div class="popmask"></div>
<div class="poppanel animation fadeIn">
内容
</div>
</div>
</html>
效果如下
image.png
