Twine Games
从顶部滑入的通知消息
这个通知功能主要包括以下特点：
1.简洁美观: 
使用渐变背景、圆角边框和淡入淡出动画，使通知看起来简洁大方。
2.动画效果: 
通知从顶部滑入，停留一段时间后自动滑出。
3.可自定义: 
通过修改CSS和JavaScript代码，可以轻松调整通知的位置、样式、动画效果等。
视频效果
图片效果
添加以下CSS代码到你的样式表中。这段代码定义了通知的外观和动画效果
/*----分割线------------通知消息css------------分割线----*/
.interaction-notification {
position: fixed; /* 固定定位，相对于视口 */
left: 50%; /* 水平居中 */
top: 2rem; /* 距离视口顶部 2rem（32px） */
transform: translateX(-50%); /* 通过水平平移自身宽度的50%来实现完美居中 */
background: linear-gradient(45deg, #2a2a2a, #333); /* 背景渐变 */
border: 1px solid #444; /* 边框 */
border-radius: 6px; /* 圆角 */
padding: 0.8rem 1.5rem; /* 内边距 */
color: #eee; /* 文字颜色 */
font-size: 1.1em; /* 字体大小 */
z-index: 1000; /* 堆叠顺序 */
animation: notificationSlide 2.5s ease forwards; /* 应用动画，持续时间2.5秒 */
pointer-events: none; /* 防止通知挡住其他交互元素 */
}
 
@keyframes notificationSlide {
0% {
transform: translate(-50%, -20px); /* 初始位置：水平居中，垂直向上偏移20px */
opacity: 0; /* 初始透明度为0，完全透明 */
}
20% {
transform: translate(-50%, 0); /* 移动到最终水平居中位置，垂直无偏移 */
opacity: 1; /* 透明度为1，完全不透明 */
}
80% {
transform: translate(-50%, 0); /* 保持最终位置 */
opacity: 1; /* 保持完全不透明 */
}
100% {
transform: translate(-50%, 20px); /* 移动到最终位置下方20px */
opacity: 0; /* 透明度为0，完全透明 */
}
}
/*----分割线------------通知消息css------------分割线----*/
添加以下JavaScript代码到你的脚本文件中。这段代码定义了一个名为 notify 的宏，用于动态创建和显示通知
/*----分割线------------通知消息js------------分割线----*/
// 添加通知宏
Macro.add('notify', {
handler: function() {
if (!this.args.length) {
console.error('需要提供通知内容');
return;
}
const notification = document.createElement('div');
notification.className = 'interaction-notification';
notification.textContent = this.args[0];
document.body.appendChild(notification);
setTimeout(() => {
notification.addEventListener('animationend', () => {
notification.remove();
});
}, 100);
}
});
/*----分割线------------通知消息js------------分割线----*/
使用示例：
<<notify "这里输入你的文字">>
------------------------------------------------------------------------------
如何自定义修改
修改通知位置
•顶部居中: 当前通知位于顶部居中。如果你想改变位置，可以调整 top 和 left 属性。例如，将通知放在右侧：
left: auto;
right: 2rem; /* 距离右侧 2rem */
top: 2rem; /* 距离顶部 2rem */
底部居中: 如果你想将通知放在底部居中，可以将 top 改为 bottom：
top: 2rem; /* 距离顶部 2rem */
bottom: 2rem; /* 距离底部 2rem */
2024-11-16
浏览920
👀 | 代码分享
登录后评论
1
11