dialog弹窗特效

<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