饺子给大家分享个二次元弹窗,有喜欢的伙伴 拿去自行部署玩玩吧

食用教程
将下列代码粘贴到”zibll主题设置->全局&功能->自定义代码->自定义头部HTML“中:
[hidecontent type="reply"]
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
body {
min-height: 100vh;
background: #f5f7ff;
}
#welcome-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.05); /* 近乎透明,看清后方内容 */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
#welcome-popup.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none; /* 隐藏后不响应点击 */
}
.popup-content {
background: white;
border-radius: 20px;
padding: 32px;
text-align: center;
max-width: 90%;
width: 420px;
box-shadow: 0 12px 40px rgba(100, 100, 255, 0.3);
position: relative;
animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* LOGO样式 - 无留白、完整显示 */
.logo {
width: auto;
max-width: 100%;
height: 80px;
margin: 0 auto 10px;
display: block;
object-fit: contain;
object-position: center;
border: none;
background: transparent;
box-shadow: none;
}
.popup-title {
font-size: 1.8rem;
font-weight: 700;
color: #ff66b2;
margin-bottom: 16px;
text-shadow: 0 1px 2px rgba(255, 102, 178, 0.2);
}
.popup-desc {
font-size: 1.4rem;
color: #555;
margin-bottom: 16px;
line-height: 1.5;
}
.time-info {
background: #f9f0ff;
padding: 12px;
border-radius: 12px;
margin: 16px 0;
font-size: 1.3rem;
color: #8a55aa;
border: 1px dashed #e0c0ff;
}
.popup-buttons {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 20px;
}
.popup-btn {
flex: 1;
padding: 12px 16px;
border: none;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background: linear-gradient(to right, #ff7eb3, #ff758c);
color: white;
}
.btn-secondary {
background: linear-gradient(to right, #a18cd1, #fbc2eb);
color: white;
}
.popup-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.popup-btn:active {
transform: translateY(0);
}
/* 取消页面滚动禁止,看清后方内容 */
body.popup-open {
overflow: auto;
}
/* 适配移动端 */
@media (max-width: 480px) {
.popup-content {
padding: 24px 16px;
}
.logo {
height: 60px;
}
.popup-title {
font-size: 1.5rem;
}
.popup-desc {
font-size: 1.2rem;
}
.time-info {
font-size: 1.1rem;
}
.popup-btn {
font-size: 1rem;
padding: 10px 12px;
}
}
</style>
<!-- 二次元风格弹窗(默认隐藏) -->
<div id="welcome-popup" class="hidden">
<div class="popup-content">
<img src="https://cs.yykbk.com/wp-content/uploads/2026/02/20260226022816570-1111-scaled.webp" alt="优源库LOGO" class="logo" />
<h2 class="popup-title">欢迎光临!(优源库)/</h2>
<p class="popup-desc">这里是我们的小站,希望你能喜欢~</p>
<div class="time-info">
<div>📅 今天是:<span id="today-date"></span></div>
<div>⏰ 当前时间:<span id="current-time"></span></div>
</div>
<div class="popup-buttons">
<button class="popup-btn btn-primary" onclick="goToLink('https://cs.yykbk.com/yl'">
立即加入本站
</button>
<button class="popup-btn btn-secondary" onclick="closePopup()">
开始浏览本站
</button>
</div>
</div>
</div>
<script>
// 更新日期和时间
function updateTime() {
try {
const now = new Date();
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
const dateString = now.toLocaleDateString('zh-CN', dateOptions);
const timeString = now.toLocaleTimeString('zh-CN', { hour12: false });
const dateElement = document.getElementById('today-date');
const timeElement = document.getElementById('current-time');
if (dateElement && timeElement) {
dateElement.textContent = dateString;
timeElement.textContent = timeString;
}
} catch (error) {
console.error('更新时间失败:', error);
}
}
// 关闭弹窗
function closePopup() {
const popup = document.getElementById('welcome-popup');
if (popup) {
popup.classList.add('hidden');
document.body.classList.remove('popup-open');
}
}
// 跳转链接并关闭弹窗
function goToLink(url) {
if (url && typeof url === 'string' && url.startsWith('http')) {
window.open(url, '_blank');
closePopup();
} else {
alert('链接地址无效!');
}
}
// 核心逻辑:判断是否今日首次访问,仅首次显示弹窗
function checkShowPopup() {
// 1. 获取今日日期(格式:2026/3/22,确保每日唯一)
const today = new Date().toLocaleDateString('zh-CN');
// 2. 读取本地存储中记录的“上次弹窗日期”
const lastPopupDate = localStorage.getItem('yykbk_popup_date');
// 3. 仅当“无记录”或“上次日期≠今日”时,才显示弹窗
if (!lastPopupDate || lastPopupDate !== today) {
const popup = document.getElementById('welcome-popup');
popup.classList.remove('hidden'); // 显示弹窗
document.body.classList.add('popup-open');
// 4. 记录本次弹窗日期到本地存储(永久保存,次日自动失效)
localStorage.setItem('yykbk_popup_date', today);
}
}
// 初始化
window.addEventListener('load', () => {
updateTime();
setInterval(updateTime, 1000);
// 执行弹窗判断逻辑(延迟500ms,避免页面加载卡顿)
setTimeout(checkShowPopup, 500);
// 点击弹窗外层关闭弹窗
const popup = document.getElementById('welcome-popup');
popup.addEventListener('click', (e) => {
if (e.target === popup) {
closePopup();
}
});
});
// 监听ESC键关闭弹窗
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closePopup();
}
});
</script>
[/hidecontent]

