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

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

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