经验分享程序开发文档资料数据资源其它资源

js右下角消息弹出通知插件notyf特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js右下角消息弹出通知插件notyf特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图1:

js右下角消息弹出通知插件notyf特效代码

部分效果截图2:

js右下角消息弹出通知插件notyf特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js右下角消息弹出通知插件notyf</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="dist/notyf.min.css">
<style type="text/css">
	html, body {
	  background-color: #2C2B41;
	  -webkit-font-smoothing: antialiased;
	  -webkit-overflow-scrolling: touch;
	  width: 100%;
	  height: 100%;
	  margin: 0;
	  font-weight: 500;
	}

	.hero {
	  height: 100%;
	}
	.hero:before {
	  content: "";
	  height: 100%;
	  margin-right: -0.5em;
	  vertical-align: middle;
	  display: inline-block;
	}
	.hero h1 {
	  color: white;
	  font-size: 7em;
	  margin-top: 0;
	  margin-bottom: 25px;
	}
	.hero h2 {
	  color: white;
	  font-weight: 400;
	  line-height: 1.7em;
	}
	.hero .wrapper {
	  display: inline-block;
	  vertical-align: middle;
	  width: 100%;
	  text-align: center;
	}
	.hero .buttons {
	  margin-top: 45px;
	}
	.hero button {
	  cursor: pointer;
	  -webkit-appearance: none;
		 -moz-appearance: none;
			  appearance: none;
	  background: none;
	  border: 1px solid white;
	  color: white;
	  width: 90px;
	  outline: none;
	  height: 46px;
	  width: 170px;
	  font-size: 1.1em;
	  margin-left: 10px;
	  margin-right: 10px;
	  border-radius: 2px;
	}
	.hero button:hover {
	  background: white;
	  color: #2C2B41;
	}

	@media only screen and (max-width: 768px) {
	  .hero {
		padding-left: 40px;
		padding-right: 40px;
	  }
	  .hero h1 {
		font-size: 4em;
	  }
	  .hero h2 {
		font-size: 1em;
	  }
	  .hero button {
		margin-bottom: 15px;
	  }
	}
	/* Small smartphones */
	@media only screen and (max-width: 360px) {
	  .hero {
		padding-left: 40px;
		padding-right: 40px;
	  }
	  .hero h1 {
		font-size: 4em;
	  }
	  .hero h2 {
		font-size: 1em;
	  }
	  .hero .buttons {
		margin-left: -32px;
		margin-right: -40px;
	  }
	  .hero button {
		font-size: 0.9em;
		margin-left: 3px;
		margin-right: 3px;
		height: 42px;
		width: 130px;
	  }
	}
	/* iPhone 6+ ----------- */
	@media only screen and (min-width: 375px) and (max-width: 736px) {
	  .hero {
		padding-left: 40px;
		padding-right: 40px;
	  }
	  .hero h1 {
		font-size: 5em;
	  }
	  .hero h2 {
		font-size: 1.2em;
	  }
	  .hero button {
		margin-left: 5px;
		margin-right: 5px;
		width: 145px;
		font-size: 1em;
	  }
	}
</style>

</head>
<body>
<div class="zzsc-container">
	<div class="hero">
		  <div class="wrapper">
			<h1>Notyf</h1>
			<div class="buttons">
			  <button type="button" name="button" id="success-btn">显示成功</button>
			  <button type="button" name="button" id="alert-btn">显示警报</button>
			</div>
		  </div>
	</div>
</div>
<script src="dist/notyf.min.js" type="text/javascript"></script>
<script type="text/javascript">
	(function(){
	  var alertMessages = [
		"I'm an alert",
		"It's me again :D",
		"Yep, I can stack on top of previous alerts",
		"Let's start over"
	  ]
	  var currentAlert = 0;
	  var successMessages = [
		"Hey there!",
		"Success! Yuhu!!",
		"It's me again :D",
		"You can show me several times. I won't hide previous messages."
	  ]
	  var currentSuccess = 0;
	  var notyf = new Notyf({delay:3000});
	  document.addEventListener('DOMContentLoaded',function(){
		document.getElementById('success-btn').addEventListener('click',function(){
		  if(currentSuccess>3){
			currentSuccess = 0;
		  }
		  notyf.confirm(successMessages[currentSuccess]);
		  currentSuccess++;
		});

		document.getElementById('alert-btn').addEventListener('click',function(){
		  if(currentAlert>3){
			currentAlert = 0;
		  }
		  notyf.alert(alertMessages[currentAlert]);
		  currentAlert++;
		});
	  });
	})();
</script>
</body>
</html>

JS代码(notyf.min.js):

!function(){
	function n(n,t){
	for(property in t)t.hasOwnProperty(property)&&(n[property]=t[property]);
	return n}
function t(n,t){
	var i=document.createElement("div");
	i.className="notyf";
	var e=document.createElement("div");
	e.className="notyf-wrapper";
	var o=document.createElement("div");
	o.className="notyf-icon";
	var a=document.createElement("i");
	a.className=t;
	var r=document.createElement("div");
	r.className="notyf-message",r.innerHTML=n,o.appendChild(a),e.appendChild(o),e.appendChild(r),i.appendChild(e);
	var c=this;
	return setTimeout(function(){
	i.className+=" disappear",i.addEventListener(c.animationEnd,function(n){
	n.target==i&&c.container.removeChild(i)}
);
	var n=c.notifications.indexOf(i);
	c.notifications.splice(n,1)}
,c.options.delay),i}
function i(){
	var n,t=document.createElement("fake"),i={
	transition:"animationend",OTransition:"oAnimationEnd",MozTransition:"animationend",WebkitTransition:"webkitAnimationEnd"}
;
	for(n in i)if(void 0!==t.style[n])return i[n]}
this.Notyf=function(){
	this.notifications=[];
	var t={
	delay:2e3,alertIcon:"notyf-alert-icon",confirmIcon:"notyf-confirm-icon"}
;
	arguments[0]&&"object"==typeof arguments[0]?this.options=n(t,arguments[0]):this.options=t;
	var e=document.createDocumentFragment(),o=document.createElement("div");
	o.className="notyf-container",e.appendChild(o),document.body.appendChild(e),this.container=o,this.animationEnd=i()}
,this.Notyf.prototype.alert=function(n){
	var i=t.call(this,n,this.options.alertIcon);
	i.className+=" alert",this.container.appendChild(i),this.notifications.push(i)}
,this.Notyf.prototype.confirm=function(n){
	var i=t.call(this,n,this.options.confirmIcon);
	i.className+=" confirm",this.container.appendChild(i),this.notifications.push(i)}
}
();

CSS代码(notyf.min.css):

@-webkit-keyframes a{0%{opacity:0;bottom:-15px;max-height:0;max-width:0;margin-top:0}
30%{opacity:.8;bottom:-3px}
to{opacity:1;bottom:0;max-height:200px;margin-top:12px;max-width:400px}
}
@keyframes a{0%{opacity:0;bottom:-15px;max-height:0;max-width:0;margin-top:0}
30%{opacity:.8;bottom:-3px}
to{opacity:1;bottom:0;max-height:200px;margin-top:12px;max-width:400px}
}
@-webkit-keyframes b{0%{opacity:1;bottom:0}
30%{opacity:.2;bottom:-3px}
to{opacity:0;bottom:-15px}
}
@keyframes b{0%{opacity:1;bottom:0}
30%{opacity:.2;bottom:-3px}
to{opacity:0;bottom:-15px}
}
@-webkit-keyframes c{0%{opacity:0}
30%{opacity:.5}
to{opacity:.6}
}
@keyframes c{0%{opacity:0}
30%{opacity:.5}
to{opacity:.6}
}
@-webkit-keyframes d{0%{opacity:.6}
30%{opacity:.1}
to{opacity:0}
}
@keyframes d{0%{opacity:.6}
30%{opacity:.1}
to{opacity:0}
}
.notyf-container{position:fixed;bottom:20px;right:30px;width:20%;color:#fff;z-index:1}
.notyf-container .notyf-alert-icon,.notyf-container .notyf-confirm-icon{height:21px;width:21px;background:#fff;border-radius:50%;display:block;margin:0 auto;position:relative}
.notyf-container .notyf-alert-icon:after,.notyf-container .notyf-alert-icon:before{content:"";background:#ed3d3d;display:block;position:absolute;width:3px;border-radius:3px;left:9px}
.notyf-container .notyf-alert-icon:after{height:3px;top:14px}
.notyf-container .notyf-alert-icon:before{height:8px;top:4px}
.notyf-container .notyf-confirm-icon:after,.notyf-container .notyf-confirm-icon:before{content:"";background:#3dc763;display:block;position:absolute;width:3px;border-radius:3px}
.notyf-container .notyf-confirm-icon:after{height:6px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);top:9px;left:6px}
.notyf-container .notyf-confirm-icon:before{height:11px;-webkit-transform:rotate(45deg);transform:rotate(45deg);top:5px;left:10px}
.notyf-container .notyf{display:block;overflow:hidden;-webkit-animation:a .3s forwards;animation:a .3s forwards;box-shadow:0 1px 3px 0 rgba(0,0,0,.45);position:relative;padding-right:13px}
.notyf-container .notyf.alert{background:#ed3d3d}
.notyf-container .notyf.confirm{background:#3dc763}
.notyf-container .notyf.disappear{-webkit-animation:b .3s 1 forwards;animation:b .3s 1 forwards;-webkit-animation-delay:.25s;animation-delay:.25s}
.notyf-container .notyf.disappear .notyf-message{opacity:1;-webkit-animation:b .3s 1 forwards;animation:b .3s 1 forwards;-webkit-animation-delay:.1s;animation-delay:.1s}
.notyf-container .notyf.disappear .notyf-icon{opacity:1;-webkit-animation:d .3s 1 forwards;animation:d .3s 1 forwards}
.notyf-container .notyf-wrapper{display:table;width:100%;padding-top:20px;padding-bottom:20px;padding-right:15px;border-radius:3px}
.notyf-container .notyf-icon{display:table-cell;width:20%;text-align:center;vertical-align:middle;font-size:1.3em;opacity:0;-webkit-animation:c .5s forwards;animation:c .5s forwards;-webkit-animation-delay:.25s;animation-delay:.25s}
.notyf-container .notyf-message{display:table-cell;width:80%;vertical-align:middle;position:relative;opacity:0;-webkit-animation:a .3s forwards;animation:a .3s forwards;-webkit-animation-delay:.15s;animation-delay:.15s}
@media only screen and (max-width:736px){.notyf-container{width:90%;margin:0 auto;display:block;right:0;left:0}
}

CSS代码(zzsc.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.zzsc-container{margin:0 auto;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
306.71 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
306.71 KB
立即下载
范珍美娴
了解
打赏作者 鼓励作者
Html JS 其它特效1
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章