js+css实现会自动关闭的右上角消息提示框代码-html代码-BFW代码库

js+css实现会自动关闭的右上角消息提示框代码

代码语言：html

所属分类：弹出层

代码描述：js+css实现会自动关闭的右上角消息提示框代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>

    <meta charset="UTF-8">
<style>
 body,html {
        background:url("//repo.bfw.wiki/bfwrepo/image/64328730b3a12.png"),linear-gradient(125deg,#252525,#515151);
        font-family:monospace
}
:root {
        --success-rgba:rgba(105,255,105,0.8);
        --info-rgba:rgba(105,105,255,0.8);
        --warning-rgba:rgba(255,180,105,0.8);
        --critical-rgba:rgba(255,105,105,0.8)
}
#notifications {
        position:absolute;
        right:0;
        top:0;
        display:flex;
        flex-flow:column-reverse;
        padding:25px
}
.notification {
        backdrop-filter:blur(0.5em);
        background-color:rgba(0,0,0,0.5);
        box-shadow:2px 2px .25em rgba(0,0,0,1);
        border-radius:5px;
        width:320px;
        height:auto;
        padding:7px;
        overflow:hidden;
        margin:auto auto 10px auto;
        animation:fade-out 10.1s linear
}
@keyframes fade-out {
        0% {
        opacity:1
}
90% {
        opacity:1
}
100% {
        opacity:0
}
}.notification:hover {
        animation:none 0s linear
}
.notification:before {
        position:absolute;
        content:"";
        height:120%;
        width:30px;
        margin:-28px auto auto -34px
}
.notification-success.notification:before {
        background:linear-gradient(to top,transparent,var(--success-rgba))
}
.notification-success .notification-loader {
        background-color:var(--success-rgba)
}
.notification-info.notification:before {
        background:linear-gradient(to top,transparent,var(--info-rgba))
}
.notification-info .notification-loader {
        background-color:var(--info-rgba)
}
.notification-warning.notification:before {
        background:linear-gradient(to top,transparent,var(--warning-rgba))
}
.notification-warning .notification-loader {
        background-color:var(--warning-rgba)
}
.notification-critical.notification:before {
        background:linear-gradient(to top,transparent,var(--critical-rgba))
}
.notification-critical .notification-loader {
        background-color:var(--critical-rgba)
}
@keyframes .........完整代码请登录后点击上方下载按钮下载查看