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 .........完整代码请登录后点击上方下载按钮下载查看