以爱心打开的方式显示弹框效果实例页面

CSS代码：

.ui-dialog-animation {
    -webkit-mask: url(./heart.svg) no-repeat center;
    -webkit-mask-size: 350% 350%;
    mask: url(./heart.svg) no-repeat center;
    mask-size: 350% 350%;
    /* 动画 */
    animation: maskHeartIn 1s;
}
@keyframes maskHeartIn {
    from {
        -webkit-mask-size: 0 0;
        mask-size: 0 0;
    }
    to {
        -webkit-mask-size: 350% 350%;
        mask-size: 350% 350%;
    }
}

HTML代码：

<button id="dialogOpen" class="ui-button ui-button-success">点击出现弹框</button>
                

JS代码：

$('#dialogOpen').on('click', function () {
    new Dialog().alert('看看出现时候的动效！', {
        type: 'success'
    });     
});