js+css实现右侧底部通知栏弹出通知效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：js+css实现右侧底部通知栏弹出通知效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
background: linear-gradient(to right, #dddde1, skyblue);
	font-family: sans-serif; 
}

.toasterHolder {
	width: 100px;
	position: fixed;
	bottom: 0%;
	right: 0%;
	z-index: 100;
}
button {
	cursor: pointer;
	position: fixed;
	top: 50%;
	left: 10px;
	transform: translate(0%,-50%);
	background: tan;
	border: 5px solid #bb7b3e;
	border-radius: 8px;
	padding: 5px;
	box-shadow: 0px 5px 10px #000;
	font-family: monospace;
}
button:hover {
	box-shadow: 0px 3px 5px #000;
	filter: brightness(80%);
}
button:active {
	box-shadow: 0px 1px 2px #000;
	filter: brightness(70%);
}
.toastMessage {
/* 	style the message yourself! */
}
</style>


  
  
</head>

<body translate="no">
  <div class="toasterHolder"></div>
<button class="newMsg">New<br/>Toaster<br/>Message!</button>
  
      <script >
function toastMe(properties) {
  const defaultProperties = {
    element: document.querySelector('.toasterHolder'),
    toastTime: 2000,
    toastColor: null,
    crustColor: null,
    messageTime: 4000,
    messageWidth: '300%',
    message: 'mmmmm... nice toasty message 😋' };

  const t = Object.assign(defaultProperties, properties);
  const randInt = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  let burnHue = randInt(-40, 10);
  let toastColor = !t.toastColor ? `rgb(${210 + burnHue}, ${180 + burnHue}, ${140 + burnHue})` : t.toastColor;
  let crustColor = !t.crustColor ? `rgb(${210 + burnHue - 50}, ${180 + burnHue - 50}, ${140 + burnHue - 50})` : t.crustColor;
  let elt = t.element;
  let toasterMessageHolder = document.createElement('div');
  toasterMessageHolder.style.height = '100px';
  toasterMessageHolder.style.width = '100px';
  toasterMessageHolder.style.position = 'relative';
  toasterMessageHolder.style.transition = '200ms';
  toasterMessageHolder.style.transitionProperty = 'height';
  // create message div
  let div = document.createElement('div');
  div.classList.add('toastMessage');
  div.innerText = t.message;
  div.style.background = toastColor;
  div.style.top = '0%';
  div.style.left = '100%';
  div.style.height = '100%';
  div.style.width = '300%';
  div.style.position = 'absolute';
  div.style.borderTop = `8px solid ${crustColor}`;
  div.style.borderLeft = `8px solid ${crustColor}`;
  div.style.overflow = 'auto';
  div.style.borderRadius = '20px 0 0 0';
  div.style.transition = 'left 100ms ease';
  div.style.padding = '10px';
  div.style.zIndex = 2;

  let toastSVGIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  toastSVGIcon.setAttribute('viewBox', '0 0 20 20');
  toastSVGIcon.style.height = '24px';
  toastSVGIcon.style.width = '24px';
  toastSVGIcon.style.position = 'absolute';
  toastSVGIcon.style.bottom = '28px';
  toastSVGIcon.style.right = '28px';

  let toastSVGIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  toastSVGIconPath.setAttribute('d', 'M 16 15 Q 16 9 15 7 C 16 6 16 4 13 4 L 7 4 C 4 4 4 6 5 7 Q 4 9 4 15 C 4 17 16 17 16 15 Z');
  toastSVGIconPath.setAttribute('stroke', 'rgba(255,255,255,0.2)');
  toastSVGIconPath.setAttribute('stroke-width', '2');
  toastSVGIconPath.setAttribute('stroke-dasharray', '45.0792');
  toastSVGIconPath.setAttribute('fill', 'none');

  let toastSVGIconAnim = document.createElementNS("http://www.w3.org/2000/svg", "animate");
  toastSVGIconAnim.setAttribute('attributeName', 'stroke-dashoffset');
  toastSVGIconAnim.setAttribute('values', '0; 45.0792');
  toastSVGIconAnim.setAttribute('begin', '0s');
  toastSVGIconAnim.setAttribute('dur', `${t.messageTime}ms`);
  toastSVGIconAnim.setAttribute("repeatCount", "none");
  toastSVGIconAnim.setAttribute("fill", "freeze");
  toastSVGIconAnim.addEventListener("endEvent", () => {
    toasterMessageHolder.style.height = '0px';
    setTimeout(() => {
      toasterMessageHolder?.remove();
    }, 200);
  });
  toastSVGIconPath.appendChild(toastSVGIconAnim);
  toastSVGIcon.appendChild(toastSVGIconPath);
  toasterMessageHolder.appendChild(div);
  // create svg
  let toastSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  toastSVG.setAttribute('viewBox', '0 0 40 40');
  toastSVG.style.height = '100%';
  toastSVG.style.height = '100%';
  toastSVG.style.positino = 'relative';
  let toaster = document.createElementNS("http://www.w3.org/2000/svg", "path");
  let toasterAnim = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform");
  toaster.classList.add('toaster');
  toaster.setAttribute('fill', 'silver');
  toaster.setAttribute('stroke', '#000');
  toaster.setAttribute('stroke-linecap', 'round');
  toaster.setAttribute('d', 'M 4 44 V 40 C 4 38 5 38 8 37 Q 20 34 32 37 C 35 38 36 38 36 40 V 44 Z M 11 38 Q 20 37 29 38 M 11 40 Q 20 39 29 40');
  toasterAnim.id = "toasterUp";
  toasterAnim.setAttribute('attributeName', 'transform');
  toasterAnim.setAttribute('type', 'translate');
  toasterAnim.setAttribute('values', '0 10; 0 0');
  toasterAnim.setAttribute('dur', `${t.toastTime / 5}ms`);
  .........完整代码请登录后点击上方下载按钮下载查看