简介
这款深蓝动态粒子URL跳转页面HTML源码，将技术与美学完美融合，为网站链接跳转提供了专业级解决方案。无论是广告跳转、外部链接引导，还是安全验证场景，这款设计都能显著提升用户体验。
效果截图
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<title>安全跳转页面</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
.main {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
z-index: 10;
}
.card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px;
max-width: 500px;
width: 100%;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
margin-bottom: 30px;
}
.card h2 {
color: #fff;
margin-bottom: 25px;
font-weight: 600;
font-size: 28px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.loader-container {
position: relative;
margin: 30px 0;
}
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
margin: 0 auto;
background-image: linear-gradient(0deg,
rgb(47, 102, 255),
rgb(153, 64, 255) 30%,
rgb(238, 55, 255) 60%,
rgb(255, 0, 76) 100%);
border-radius: 50%;
animation: rotate 1.5s linear infinite;
box-shadow: 0 0 50px rgba(153, 64, 255, 0.5);
}
.circle::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background-image: linear-gradient(0deg,
rgb(47, 102, 255),
rgb(153, 64, 255) 30%,
rgb(238, 55, 255) 60%,
rgb(255, 0, 76) 100%);
border-radius: 50%;
filter: blur(35px);
opacity: 0.7;
}
.circle::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
background: rgba(15, 12, 41, 0.8);
border-radius: 50%;
}
.countdown {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 42px;
font-weight: 700;
z-index: 20;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.info-box {
background: rgba(0, 0, 0, 0.2);
border-radius: 12px;
padding: 15px;
margin: 20px 0;
}
.info-box p {
color: #fff;
margin: 8px 0;
font-size: 16px;
}
.info-box .url {
color: #6cff6c;
font-weight: 500;
word-break: break-all;
font-size: 14px;
}
.security-info {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
color: #ffc107;
}
.security-info i {
margin-right: 10px;
font-size: 20px;
}
.tips {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin-top: 15px;
line-height: 1.6;
}
.btn-cancel {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
padding: 10px 25px;
border-radius: 50px;
font-weight: 500;
margin-top: 20px;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-cancel:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.footer {
color: rgba(255, 255, 255, 0.6);
text-align: center;
font-size: 14px;
margin-top: 20px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.particle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 576px) {
.card {
padding: 20px;
}
.circle {
width: 150px;
height: 150px;
}
.circle::before {
width: 150px;
height: 150px;
}
.circle::after {
width: 110px;
height: 110px;
}
.countdown {
font-size: 32px;
}
}
</style>
</head>
<body onload="time()">
<div class="particles" id="particles"></div>
<div class="main">
<div class="card">
<h2><i class="fas fa-shield-alt"></i> 安全跳转页面</h2>
<div class="loader-container">
<div class="circle"></div>
<div class="countdown" id="second">3s</div>
</div>
<div class="info-box">
<p><i class="fas fa-exclamation-triangle"></i> 网络交易需谨慎，正在跳转到目标网址</p>
<p>目标网址：<span id="targetUrl" class="url">正在获取...</span></p>
</div>
<div class="security-info">
<i class="fas fa-lock"></i>
<span>安全检测通过，此跳转经过安全验证</span>
</div>
<p class="tips">
请注意：该跳转由第三方网站提供，请仔细核对网址，确保访问的是您信任的网站。
如有疑问，请勿继续访问。
</p>
<button class="btn-cancel" onclick="cancelRedirect()">
<i class="fas fa-ban"></i> 取消跳转
</button>
</div>
<div class="footer">
<p>安小熙博客 © 2025 | 保护您的网络安全</p>
</div>
</div>
<script>
// 创建粒子背景
function createParticles() {
const container = document.getElementById('particles');
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机大小和位置
const size = Math.random() * 5 + 2;
const posX = Math.random() * 100;
const posY = Math.random() * 100;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${posX}%`;
particle.style.top = `${posY}%`;
// 随机动画
const animationDuration = Math.random() * 20 + 10;
particle.style.animation = `float ${animationDuration}s linear infinite`;
container.appendChild(particle);
}
}
// 修复URL获取函数，正确处理#后缀
function getTargetUrl() {
// 获取完整的查询字符串（包括#后面的部分）
const fullQuery = window.location.href.split('?')[1] || '';
// 正确处理多个参数和包含#的情况
const params = new URLSearchParams(fullQuery);
const urlParam = params.get('url');
// 如果URL参数存在，返回它；否则返回默认URL
return urlParam || "https://www.anxiaoxi.com";
}
// 显示目标URL
function displayTargetUrl() {
const targetUrl = getTargetUrl();
document.getElementById('targetUrl').textContent = targetUrl;
}
// 倒计时和跳转
function time() {
displayTargetUrl();
const sec = document.getElementById("second");
let i = 3; // 设置定时时间
const timer = setInterval(function() {
i--;
sec.innerHTML = i + "s";
if (i <= 0) {
clearInterval(timer);
window.location.href = getTargetUrl();
}
}, 1000);
}
// 初始化粒子效果
createParticles();
</script>
</body>
</html>也可以直接评论下载
使用教程
将下面代码可以放到一个html或者PHP空白文件里面，然后放到服务器对应的位置就可以用了,，比如·放到go.php里面，浏览器访问xxx/go.php/?url=目标网址 就可以了
资源下载
抱歉，下载地址 评论 后刷新可见
版权说明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件：axxgzs@qq.com与我们联系处理。敬请谅解！！
