url.html
默认的跳转中间页代码
默认情况下，跳转中间页的代码文件位于 view/你的模板/page/url.html 。相关页面截图如下：
对应的代码内容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="1; url={$t.ssl}://{$t.www}">
<title>即将访问"{$t.title}"</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);height:100vh;display:flex;justify-content:center;align-items:center;font-family:'Microsoft YaHei',sans-serif;color:#fff}
.container{text-align:center;position:relative}
.loader{width:80px;height:80px;margin:0 auto 20px;position:relative}
.loader::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:4px solid rgba(255,255,255,.1)}
.loader::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:4px solid transparent;border-top-color:#0f8;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
h1{font-size:2.5em;margin-bottom:30px;letter-spacing:2px;text-shadow:0 2px 5px rgba(0,0,0,.3)}
p{color:rgba(255,255,255,.8);margin-bottom:30px}
.progress-bar{width:300px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;margin:0 auto;overflow:hidden}
.progress{width:100%;height:100%;background:#0f8;animation:progress 1s linear forwards;transform-origin:left}
@keyframes progress{0%{transform:scaleX(0)}
100%{transform:scaleX(1)}
}
.logo{position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:60px;opacity:.9}
</style>
</head>
<body>
<div class="container">
<div class="loader"></div>
<h1>{$t.title}</h1>
<p>请稍候，即将自动跳转...</p>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>
</body>
</html>你可以根据实际需求对该代码文件进行查看、修改等操作，以满足网站的跳转逻辑等功能需求。
跳转样式二
截图
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="1; url={$t.ssl}://{$t.www}">
<title>即将访问"{$t.title}"</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);height:100vh;display:flex;justify-content:center;align-items:center;font-family:'Microsoft YaHei',sans-serif;color:#333}
.container{text-align:center;position:relative;background:rgba(255,255,255,.9);padding:40px;border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,.1)}
.loader{width:60px;height:60px;margin:0 auto 20px;position:relative;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
h1{font-size:2em;margin-bottom:20px;color:#3498db;text-shadow:1px 1px 2px rgba(0,0,0,.1)}
p{margin-bottom:30px;color:#666}
.progress-bar{width:250px;height:8px;background:#ecf0f1;border-radius:4px;margin:0 auto;overflow:hidden}
.progress{width:100%;height:100%;background:linear-gradient(to right,#3498db,#2980b9);animation:progress 1s linear forwards}
@keyframes progress{0%{transform:scaleX(0)}
100%{transform:scaleX(1)}
}
.logo{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:40px;opacity:.8}
</style>
</head>
<body>
<div class="container">
<div class="loader"></div>
<h1>{$t.title}</h1>
<p>正在为您跳转，请稍候...</p>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>
</body>
</html>