原生js实现toast右下角弹出消息层效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：原生js实现toast右下角弹出消息层效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
:root {
	--page-bg: #333;
	--bg-error: 356deg;
	--bg-success: 118deg;
	--bg-warning: 56deg;
	--bg-button: 0deg;
}

@media (prefers-color-scheme: light) {
	:root {
		--page-bg: linear-gradient(to right, #fcf0c1, #ffcec1);
		--bg-error: 356deg;
		--bg-success: 118deg;
		--bg-warning: 56deg;
		--bg-button: 140deg;
	}
}

.toast {
	display: grid;
	grid-template-rows: 54px;
	transition: grid-template-rows 250ms ease-in-out;
}
.toast[data-type="error"] {
	--bg-current: var(--bg-error);
}
.toast[data-type="success"] {
	--bg-current: var(--bg-success);
}
.toast[data-type="warning"] {
	--bg-current: var(--bg-warning);
	& svg path {
		fill: currentColor;
		stroke: none;
	}
}

.toast_inner {
	height: 54px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid #000;
	border-radius: 8px;
	background-color: hsl(var(--bg-current) 70% 45% / 0.2);
	@media (prefers-color-scheme: light) {
		background-color: hsl(var(--bg-current) 50% 55% / 0.6);
	}
	box-shadow: 4px 4px 0px 2px hsl(var(--bg-current) 30% 10% / 0.3);
	color: whitesmoke;
	transition: transform 350ms ease-in, opacity 350ms ease-in;
	overflow: hidden;
	& .toast_icon {
		color: hsl(var(--bg-current) 86% 45%);
		@media (prefers-color-scheme: light) {
			color: hsl(var(--bg-current) 96% 65%);
		}
	}
}

.toast_inner.toast_inner_out {
	transform: translateX(20%) scaleY(0);
}
.toast.toast_out {
	grid-template-rows: 0px;
}

.toast_icon {
	display: flex;
	align-items: center;
	& svg {
		display: block;
		width: 28px;
		height: 28px;
		& path {
			stroke: currentColor;
		}
	}
}

.toast_text {
	display: block;
	flex: 1 0 auto;
	color: hsl(var(--bg-current) 85% 85%);
	font-family: "Roboto Mono", monospace;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	@media (prefers-color-scheme: light) {
		color: hsl(var(--bg-current) 30% 25%);
	}
}

.toast_close {
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border-width: 1px;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	&::before,
	&::after {
		content: "";
		position: absolute;
		width: 1px;
		height: 18px;
		background: #76767699;
		background-color: hsl(var(--bg-current) 27% 42%);
		
		@media (prefers-color-scheme: light) {
			color: hsl(var(--bg-current) 30% 25%);
		}
		@media (prefers-color-scheme: light) {
			background-color: hsl(var(--bg-current) 15% 55%);
		}
		
		transform-origin: center;
		transition: background 100ms ease-in;
	}
	&::after {
		rotate: 45deg;
	}
	&::before {
		rotate: -45deg;
	}
	&:active::before,
	&:active::after {
		background-color: hsl(var(--bg-current) 27% 16%);
		@media (prefers-color-scheme: light) {
			background-color: hsl(var(--bg-current) 15% 55%);
		}
	}
}

.toastButton {
	position: absolute;
	padding: 8px 16px;
	font-weight: 500;
	border: none;
	background-color: hsl(var(--bg-button) 0% 35%);
	color: hsl(var(--bg-button) 30% 5%);
	font-family: "Roboto Mono", monospace;
	border-radius: 8px;
	cursor: pointer;
	@media (prefers-color-scheme: light) {
		background-color: hsl(var(--bg-button) 0% 75%);
		color: hsl(var(--bg-button) 30% 5%);
	}
	&::before {
		content: "";
		position: absolute;
		border-radius: inherit;
		inset: -1px;
		background-color: hsl(var(--bg-button) 0% 55%);
		z-index: -1;
		scale: 1.02;
		transition: scale 150ms ease-out;
	}
	&:active&::before {
		scale: 1;
	}
}

svg {
	display: none;
}

.container {
	flex: 1;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: end;
	justify-content: end;
}

body {
	height: 100vh;
	margin: 0px;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: start;
	overflow: hidden;
	background: var(--page-bg);
	font-family: sans-serif;
}

p {
	margin: 0;
}

* {
	box-sizing: border-box;
}
</style>



  
  
</head>

<body translate="no">
  <div class="container">

	<div class="toast" data-type="success">
		<div class="toast_inner">
			<div class="toast_icon">

				<svg id="success" xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 16v4M6 4v4m1 10H3M8 6H4m9-2 1.753 4.444c.188.477.282.715.426.916.127.178.283.334.461.461.2.144.44.238.916.426L21 12l-4.444 1.753c-.477.188-.715.282-.916.426a1.998 1.998 0 0 0-.461.461c-.144.2-.238.44-.426.916L13 20l-1.753-4.444c-.188-.477-.282-.715-.426-.916a1.998 1.998 0 0 0-.461-.461c-.2-.144-.44-.238-.916-.426L5 12l4.444-1.753c.477-.188.715-.282.916-.426.178-.127.334-.283.461-.461.144-.2.238-.44.426-.916L13 4Z"></path>
				</svg>

			</div>
			<div class="toast_text">
				Request completed
			</div>
			<button class="toast_close">
			</button>
		</div>
	</div>

	<div class="toast" data-type="warning">
		<div class="toast_inner">
			<div class="toast_icon">

				<svg id="warning" xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24">
					<path d="M1.333 8.074a1 1 0 1 0 1.334 1.49l-1.334-1.49Zm20 1.49a1 1 0 1 0 1.334-1.49l-1.334 1.49ZM12 19a1 1 0 1 0 0 2v-2Zm.01 2a1 1 0 1 0 0-2v2Zm2.68-3.96a1 1 0 0 0 1.346-1.48l-1.346 1.48Zm3.364-3.7a1 1 0 0 0 1.346-1.48l-1.346 1.48Zm-10.09 2.22a1 1 0 0 0 1.345 1.48l-1.345-1.48ZM4.6 11.86a1 1 0 1 0 1.346 1.48L4.6 11.86Zm5.97-7.797a1 1 0 0 0 .177 1.992l-.177-1.992Zm6.77 6.317a1 1 0 1 0-.973 1.748l.972-1.748ZM3.706 2.293a1 1 0 0 0-1.414 1.414l1.414-1.414Zm16.586 19.414a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM12 6c3.586 0 6.856 1.347 9.333 3.565l1.334-1.49A15.944 15.944 0 0 0 12 4v2Zm0 15h.01v-2H12v2Zm0-5c1.037 0 1.98.393 2.69 1.04l1.346-1.48A5.982 5.982 0 0 0 12 14v2Zm-2.69 1.04A3.982 3.982 0 0 1 12 16v-2a5.982 5.982 0 0 0-4.036 1.56l1.345 1.48Zm1.437-10.985C11.16 6.02 11.577 6 12 6V4c-.482 0-.95.........完整代码请登录后点击上方下载按钮下载查看