css+js实现消息通知弹出层效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：css+js实现消息通知弹出层效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap Icons -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap-icons.1.5.css">
    <!-- Style CSS -->
<style>
*,*:after,*:before {
	box-sizing:border-box;
	margin:0;
	padding:0
}
:root {
	--blue:#1b77ec;
	--red:#d63b3f;
	--yellow:#d6ad13;
	--green:#01ad23;
	--white:#fff;
	--pastelblue:#cce7ff;
	--pastelred:#fee1e3;
	--pastelyellow:#fff2c7;
	--pastelgreen:#e4ffe9
}
body {
	font-family:'Poppins',sans-serif;
	font-size:14px;
	color:#363A3E;
	background-color:#F2F8FC;
	overflow:hidden;
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center
}
h1 {
	font-size:28px;
	font-weight:700;
	color:#006FFF;
	text-align:center;
	padding-top:75px
}
.toast-type {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:1em;
	list-style-type:none;
	margin:15px
}
.toast-type li {
	font-size:16px;
	font-family:'Poppins',sans-serif;
	color:#363A3E
}
.toast-type li a {
	text-decoration:underline;
	margin-left:5px;
	color:#006FFF
}
li a:hover {
	color:#737980
}
.sub-headline {
	font-size:18px;
	color:#363A3E;
	text-align:center
}
.toast-position {
	display:flex;
	flex-direction:row;
	justify-content:center;
	margin:15px
}
.list-group {
	margin:15px
}
.list-group label {
	color:#737980
}
.list-group input[type="radio"] {
	-webkit-appearance:none;
	appearance:none
}
.list-group label {
	position:relative
}
.list-group label::before {
	content:'';
	width:16px;
	height:16px;
	background-color:white;
	border:1px solid #c2c6ca;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:-20px
}
.list-group input[type="radio"]:checked+label::after {
	content:'';
	width:10px;
	height:10px;
	background-color:#006FFF;
	position:absolute;
	left:-17px;
	top:5px
}
.list-group input[type="radio"]:checked+label::before {
	border:1px solid #006FFF
}
.list-group input[type="radio"]:active+label::before {
	border:1px solid #cce7ff;
	transition:border ease-in .2ms
}
.list-group input[type="radio"]:not(:checked):hover+label::after {
	content:'';
	width:10px;
	height:10px;
	background-color:#006FFF;
	position:absolute;
	left:-17px;
	top:5px;
	opacity:.3
}
.list-group input[type="radio"]:not(:checked):hover+label::before {
	border:1px solid #006FFF;
	opacity:.3
}
.list-group input[type="radio"]:checked+label {
	color:#006FFF
}
.toast-radio {
	cursor:pointer
}
.call-to-action {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:1em
}
.btn-info {
	color:#fff;
	background-color:#1B77EC;
	font-size:18px;
	width:148px;
	height:40px;
	border:0;
	outline:0;
	border-radius:5px;
	cursor:pointer
}
.btn-info:active {
	transform:scale(0.98);
	opacity:.9
}
.btn-success {
	color:#fff;
	background-color:#01ad23;
	font-size:18px;
	width:148px;
	height:40px;
	border:0;
	outline:0;
	border-radius:5px;
	cursor:pointer
}
.btn-success:active {
	transform:scale(0.98);
	opacity:.9
}
.btn-warning {
	color:#fff;
	background-color:#d6ad13;
	font-size:18px;
	width:148px;
	height:40px;
	border:0;
	outline:0;
	border-radius:5px;
	cursor:pointer
}
.btn-warning:active {
	transform:scale(0.98);
	opacity:.9
}
.btn-error {
	color:#fff;
	background-color:#d63b3f;
	font-size:18px;
	width:148px;
	height:40px;
	border:0;
	outline:0;
	border-radius:5px;
	cursor:pointer
}
.btn-error:active {
	transform:scale(0.98);
	opacity:.9
}
h3 {
	font-size:18px;
	font-weight:600
}
p {
	font-size:14px;
	color:#363A3E
}
.toast-container {
	position:fixed;
	margin:15px;
	display:flex;
	flex-direction:column;
	gap:1em
}
.toast-container[toast-position^="top-"] {
	top:0
}
.toast-container[toast-position$="-right"] {
	right:0
}
.toast-container[toast-position$="-left"] {
	left:0
}
.toast-container[toast-position^="bottom-"] {
	bottom:0
}
.toast-container[toast-position$="-center"] {
	left:50%;
	transform:translateX(-50%)
}
.toast {
	display:inline-flex;
	align-items:center;
	width:425px;
	height:60px;
	padding:10px;
	position:relative;
	box-shadow:0 .25rem .5625rem -0.0625rem rgb(0 0 0 / 3%),0 .275rem 1.25rem -0.0625rem rgb(0 0 0 / 5%);
	transition:transform .5s cubic-bezier(.58,.08,0,.9)
}
.toast-container[toast-position$="-right"] .toast {
	transform:translateX(150%)
}
.toast-container[toast-position$="-left"] .toast {
	transform:translateX(-150%)
}
.toast-container[toast-position$="-center"] .toast {
	transform:translateY(-150vh)
}
.toast-container .toast.show {
	transform:translate(0,0)
}
.btn-close {
	background-color:transparent;
	border:0;
	outline:0;
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
	cursor:pointer
}
.btn-close .bi-x.close {
	color:#737980;
	background-color:transparent;
	border:0
}
.btn-close:hover {
	opacity:.7
}
.headlines {
	display:flex;
	flex-direction:column;
	margin:0
}
.hedaline[data-state="info"] {
	color:var(--blue);
	color:#1b77ec
}
.hedaline[data-state="success"] {
	color:var(--green);
	color:#01ad23
}
.hedaline[data-state="warning"] {
	color:var(--yellow);
	color:#d6ad13
}
.hedaline[data-state="error"] {
	color:var(--red);
	color:#d63b3f
}
.toast.information {
	background-color:#cce7ff;
	background-color:var(--pastelblue);
	border-radius:10px;
	border:1px solid var(--blue);
	border:1px solid #1b77ec
}
.toast.success {
	background-color:#e4ffe9;
	background-color:var(--pastelgreen);
	border-radius:10px;
	border:1px solid var(--green);
	border:1px solid #01ad23
}
.toast.warning {
	background-color:#fff2c7;
	background-color:var(--pastelyellow);
	border-radius:10px;
	border:1px solid var(--yellow);
	border:1px solid #d6ad13
}
.toast.error {
	background-color:#fee1e3;
	background-color:var(--pastelred);
	border-radius:10px;
	border:1px solid var(--red);
	border:1px solid #d63b3f
}
.bi {
	font-size:24px;
	width:28px;
	height:28px;
	border-radius:50%;
	display:flex;
	justify-content:center;
	margin-right:10px
}
.bi-info {
	color:var(--blue);
	border:1px solid var(--blue);
	border:1px solid #1b77ec;
	background-color:var(--white);
	background-color:#fff
}
.bi-check {
	color:var(--green);
	border:1px solid var(--green);
	border:1px solid #01ad23;
	background-color:var(--white);
	background-color:#fff
}
.bi-exclamation {
	color:var(--yellow);
	border:1px solid var(--yellow);
	border:1px solid #d6ad13;
	background-color:var(--white);
	background-color:#fff
}
.bi-x {
	color:var(--red);
	border:1px solid var(--red);
	border:1px solid #d63b3f;
	background-color:var(--white);
	background-color:#fff
}
@media(max-width:700px) {
	.toast-position {
	flex-direction:column;
	align-items:center;
	justify-content:center
}
.call-to-action {
	flex-direction:column
}
.toast-type {
	flex-direction:column
}
}
</style>
    <!-- Title -->

</head>

<body>
    <div class="toast-position">
        <div class="list-group"><input id="top-left" checked type="radio" name="ts-radio" value="top-left" /><label for="top-left">Top left </label></div>
        <div class="list-group"><input id="top-right" type="radio" name="ts-radio" value="top-right" /><label for="top-right">Top Right </label></div>
        <div class="list-group"><input id="top-center" type="radio" name="ts-radio" value="top-center" /><label for="top-center">Top Center </label></di.........完整代码请登录后点击上方下载按钮下载查看