释放双眼，带上耳机，听听看~！
提示：本文最后更新于2025-03-31，如有错误或者已经失效，请评论，留言或者告知在线客服。
随机2级域名引导页源码是一款功能强大、易于使用的工具，通过随机生成域名前缀，有效防止被拦截，适合个人和小型企业搭建引导页。
每次点进去都随机一个域名前缀。然后就可以防止被拦截啥的了，适合拿来做云商城访问跳转。修改跳转域名在 348 行代码，自行修改即可。
随机2级域名引导页源码是一款用于生成随机2级域名的引导页工具。该源码每次访问时都会随机生成一个域名前缀，有效防止被拦截，适合用于云商城访问跳转等场景。
源码功能
- 随机域名生成：每次访问时随机生成一个域名前缀。
- 防止拦截：通过随机域名前缀，有效防止被拦截。
- 自定义跳转：用户可以自行修改跳转域名。
- 简单易用：源码结构清晰，易于修改和部署。
源码特色
- 高效防封：通过随机域名前缀，有效防止被拦截。
- 易于部署：源码结构简单，易于修改和部署。
- 灵活性高：支持自定义跳转域名，满足不同用户需求。
代码演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不迷路的小宝宝</title>
<style>
:root {
--bg-color: hsl(345, 8%, 98%);
--container-bg: rgba(255, 255, 255, 0.85);
--primary-color: #4CAF50;
--title-color: #FF80AB;
--text-color: #4a4a4a;
--shadow-light: rgba(255, 255, 255, 0.8);
--shadow-dark: rgba(206, 206, 206, 0.15);
--theme-icon: "☀️";
--btn-padding: 1rem 2rem;
--avatar-size: 6.5rem;
font-size: 16px;
}
.dark-mode {
--bg-color: #2c3e50;
--container-bg: rgba(52, 73, 94, 0.9);
--primary-color: #66BB6A;
--title-color: #F48FB1;
--text-color: #ecf0f1;
--shadow-light: #405467;
--shadow-dark: #1f2b38;
--theme-icon: "🌙";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', sans-serif;
transition: all 0.3s ease;
}
body {
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
display: flex;
justify-content: center;
align-items: center;
background: var(--bg-color);
padding: 20px;
position: relative;
overflow: hidden;
}
/* 响应式调整 */
@media (max-width: 480px) {
:root {
font-size: 14px;
--btn-padding: 0.8rem 1.5rem;
--avatar-size: 5.5rem;
}
.container {
padding: 1.5rem;
border-radius: 12px;
}
h1 {
font-size: clamp(1.4rem, 6vw, 1.8rem);
margin-bottom: 1rem;
}
.avatar {
margin-bottom: 1.5rem;
}
}
@media (min-width: 481px) and (max-width: 1024px) {
:root {
--avatar-size: 7rem;
}
.container {
max-width: 80%;
}
}
.geo-shape {
position: absolute;
background: rgba(245, 220, 225, 0.06);
animation: geoMove 35s infinite linear;
opacity: 0.5;
will-change: transform;
z-index: 0;
}
.hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
@keyframes geoMove {
0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); }
25% { transform: translate(12vw,8vh) rotate(90deg); }
50% { transform: translate(-8vw,12vh) rotate(180deg); }
75% { transform: translate(10vw,-6vh) rotate(270deg); }
}
.container {
background: var(--container-bg);
padding: 2rem;
border-radius: 16px;
box-shadow: 5px 5px 12px var(--shadow-dark),
-5px -5px 12px var(--shadow-light);
max-width: min(90%, 500px);
width: 90%;
text-align: center;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(6px);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: var(--title-color);
margin-bottom: 1.5rem;
font-size: clamp(1.6rem, 5vw, 2rem);
text-shadow:
2px 2px 3px rgba(255, 255, 255, 0.5),
-1px -1px 2px rgba(0, 0, 0, 0.1);
position: relative;
display: inline-block;
animation: titleFloat 4s ease-in-out infinite;
width: 100%;
order: 1;
}
.avatar {
width: var(--avatar-size);
height: var(--avatar-size);
max-width: 90px;
max-height: 90px;
border-radius: 50%;
margin: 0 auto 2rem;
box-shadow: 4px 4px 8px var(--shadow-dark),
-4px -4px 8px var(--shadow-light);
border: 2px solid rgba(255, 255, 255, 0.3);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
order: 2;
}
.rotating {
animation: avatarRotate 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes avatarRotate {
0% { transform: rotate(0deg) scale(1); }
30% { transform: rotate(180deg) scale(1.1); }
70% { transform: rotate(300deg) scale(0.95); }
100% { transform: rotate(360deg) scale(1); }
}
.btn-wrapper {
margin: 25px 0;
position: relative;
order: 3;
width: 100%;
}
.btn {
background: linear-gradient(145deg,
color-mix(in srgb, var(--primary-color), white 15%),
color-mix(in srgb, var(--primary-color), black 8%)
);
color: white;
padding: var(--btn-padding);
border: none;
border-radius: 12px;
font-size: clamp(1rem, 4vw, 1.1rem);
cursor: pointer;
box-shadow:
4px 4px 8px var(--shadow-dark),
-4px -4px 8px var(--shadow-light),
0 6px 20px rgba(76, 175, 80, 0.15);
transition:
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
position: relative;
overflow: hidden;
min-width: 120px;
min-height: 44px;
-webkit-tap-highlight-color: transparent;
display: block;
margin: 0 auto;
}
.btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
6px 6px 12px var(--shadow-dark),
-6px -6px 12px var(--shadow-light),
0 8px 25px rgba(76, 175, 80, 0.2);
}
.btn:active {
transform: translateY(1px);
box-shadow:
2px 2px 4px var(--shadow-dark),
-2px -2px 4px var(--shadow-light);
}
.wave-loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
display: none;
}
.wave-circle {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
border: 2px solid var(--primary-color);
animation: wavePulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
opacity: 0;
}
@keyframes wavePulse {
0% { transform: scale(0); opacity: 0.6; }
100% { transform: scale(2); opacity: 0; }
}
.tip {
color: var(--text-color);
font-size: clamp(0.75rem, 3vw, 0.85rem);
line-height: 1.4;
margin: 15px 0;
min-height: 50px;
padding: 0.8rem;
order: 4;
width: 100%;
}
.theme-toggle {
position: fixed;
top: 15px;
right: 15px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--container-bg);
box-shadow: 2px 2px 4px var(--shadow-dark),
-2px -2px 4px var(--shadow-light);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.theme-toggle::before {
content: var(--theme-icon);
font-size: 1.1em;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}
.biankuang {
font-size: clamp(0.7rem, 3vw, 0.8rem);
border: 1px solid pink;
border-radius: 10px;
padding: 10px;
}
@keyframes titleFloat {
0%, 100% { transform: translateY(0) rotate(-0.5deg); }
50% { transform: translateY(-3px) rotate(0.5deg); }
}
</style>
</head>
<body>
<div class="geo-shape hexagon" style="width:70px; height:70px; top:10%; left:8%"></div>
<div class="geo-shape triangle" style="width:50px; height:50px; bottom:15%; right:8%"></div>
<div class="wave-loader" id="loader">
<div class="wave-circle" style="animation-delay: 0s"></div>
<div class="wave-circle" style="animation-delay: 0.4s"></div>
</div>
<div class="theme-toggle" onclick="toggleTheme()"></div>
<div class="container">
<h1>渡漳引导页</h1>
<img src="https://api.suyanw.cn/api/qq.php/?qq=84368896"
class="avatar"
id="avatar">
<div class="btn-wrapper">
<button class="btn" onclick="handleClick()" id="btn">立即前往</button>
</div>
<p class="tip biankuang" id="tip">❗️因为每次打开都是新网址<br><br>所以要麻烦宝子重新登录哦～<br><br>如果不想每次都重新登录请收藏访问的新链接等打不开的时候再重新生成一个即可。</p>
</div>
<script>
// 视口高度适配
function handleViewport() {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', handleViewport);
handleViewport();
// 系统主题适配
const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
const applyTheme = (isDark) => {
document.body.classList.toggle('dark-mode', isDark);
};
systemDarkMode.addListener((e) => applyTheme(e.matches));
applyTheme(systemDarkMode.matches);
// 点击处理
let isProcessing = false;
function handleClick() {
if(isProcessing) return;
isProcessing = true;
const loader = document.getElementById('loader');
const avatar = document.getElementById('avatar');
const tip = document.getElementById('tip');
const btn = document.getElementById('btn');
const ripple = document.createElement('div');
ripple.style.cssText = `
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
`;
const rect = btn.getBoundingClientRect();
ripple.style.left = `${event.clientX - rect.left}px`;
ripple.style.top = `${event.clientY - rect.top}px`;
btn.appendChild(ripple);
loader.style.display = 'block';
avatar.classList.add('rotating');
tip.textContent = '正在随机新路线...';
setTimeout(() => {
window.open(`http://${generateRandomString()}.dzcrv.com`, '_blank');
loader.style.display = 'none';
avatar.classList.remove('rotating');
tip.textContent = '✨因为每次打开都是新网址，\n所以宝宝需要重新登录哦～';
isProcessing = false;
ripple.remove();
}, 1200);
}
function toggleTheme() {
document.body.classList.toggle('dark-mode');
systemDarkMode.removeListener(applyTheme);
}
function generateRandomString() {
return Math.random().toString(36).substr(2,5).toUpperCase();
}
const style = document.createElement('style');
style.textContent = `
@keyframes ripple {
to { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
`;
document.head.appendChild(style);
document.querySelectorAll('.geo-shape').forEach(shape => {
shape.style.animationDelay = `${Math.random() * 5}s`;
});
</script>
<script src="//cdn.suyanw.cn/suyan.js"></script>
</body>
</html>随机2级域名引导页源码是一款功能强大、易于使用的工具，通过随机生成域名前缀，有效防止被拦截，适合个人和小型企业搭建引导页。
本站声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
本站名称：渡漳网
网址：https://www.dzcrv.com
本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
由于网络资源有极快的复制性，付费资源一经购买 ，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。
本站名称：渡漳网
网址：https://www.dzcrv.com
本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
由于网络资源有极快的复制性，付费资源一经购买 ，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。
