分享一个简单而美观的HTML跳转页面源码
在网页开发中，我们经常会遇到需要实现页面跳转的场景，比如引导用户从一个临时页面跳转到正式的网站页面。今天就来给大家分享一个简单且美观的HTML跳转页面源码，它不仅能实现基本的跳转功能，还通过精心设计的样式和动画效果，给用户带来良好的视觉体验。
效果预览
一、功能介绍
这个HTML页面主要实现了在指定时间后自动跳转到目标网址的功能。同时，页面整体经过美化，具有渐变背景、淡入动画、加载提示等元素，使页面看起来更加生动和专业。
二、关键代码解析
（一）HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>即将跳转</title>
<style>
/* 通用样式重置，去除浏览器默认样式差异 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 整体页面背景样式 */
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #fdfcfb, #e2d1c3);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
animation: fadeInBg 1.2s ease forwards;
}
/* 背景渐变动画 */
@keyframes fadeInBg {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 包裹提示内容的容器样式 */
.container {
max-width: 450px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
padding: 45px;
text-align: center;
animation: fadeInContainer 1.2s ease 0.3s forwards;
opacity: 0;
}
/* 容器淡入动画 */
@keyframes fadeInContainer {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
h1 {
color: #333;
font-size: 32px;
margin-bottom: 25px;
font-weight: 700;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
p {
color: #666;
font-size: 20px;
line-height: 1.6;
margin-bottom: 35px;
}
/* 加载动画样式 */
.loader {
border: 6px solid #f5f5f5;
border-top: 6px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1.5s linear infinite;
margin: 0 auto 25px;
}
/* 加载动画旋转效果 */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
// 目标网址，此处定义为https://www.fulicode.cn，可根据实际需求修改此处的网址
const targetUrl = 'https://www.fulicode.cn';
// 定义跳转秒数变量，这里设置为1秒，可根据需求修改此值
const jumpSeconds = 1;
window.onload = function () {
// 页面加载完成后启动定时器，按照设定的秒数跳转到目标网址
setTimeout(() => {
window.location.href = targetUrl;
}, jumpSeconds * 1000);
};
</script>
</head>
<body>
<div class="container">
<div class="loader"></div>
<h1>页面正在加载，即将跳转...</h1>
<p>请稍作等待，精彩内容即将呈现。</p>
</div>
</body>
</html>（二）CSS样式
- 通用样式重置：使用
*选择器，将所有元素的内外边距设置为0，并将盒模型设置为border - box，确保在不同浏览器下样式的一致性。 页面背景：
- 为
body元素设置了线性渐变背景background: linear-gradient(135deg, #fdfcfb, #e2d1c3)，从浅米色到淡黄色的渐变，营造出柔和的视觉效果。 - 通过
display: flex、justify-content: center和align-items: center使页面内容在水平和垂直方向上都居中显示。 min - height: 100vh确保页面高度至少为视口高度，overflow: hidden隐藏溢出内容，避免出现滚动条。同时，定义了fadeInBg动画，使背景在1.2秒内从透明淡入到不透明。
- 为
内容容器：
.container类定义了包裹提示内容的容器样式。设置了最大宽度max - width: 450px，背景色为带有透明度的白色background - color: rgba(255, 255, 255, 0.9)，增加了通透感。- 边框使用
border - radius: 20px设置为圆角，box - shadow: 0 10px 20px rgba(0, 0, 0, 0.15)添加了阴影效果，使容器更具立体感。 - 容器具有
fadeInContainer动画，在页面加载0.3秒后开始，1.2秒内从上方移动并淡入显示。
文字样式：
h1标题设置了字体大小32px、颜色#333、加粗font - weight: 700以及文字阴影text - shadow: 1px 1px 3px rgba(0, 0, 0, 0.1)，使其更加醒目。p段落文字设置了字体大小20px、颜色#666和行间距line - height: 1.6，保证了良好的可读性。
加载动画：
.loader类创建了一个加载动画，通过设置圆形边框border: 6px solid #f5f5f5; border - top: 6px solid #3498db，顶部边框为蓝色，其余为浅灰色。- 使用
animation: spin 1.5s linear infinite定义了旋转动画，使加载图标以1.5秒的周期无限旋转。
（三）JavaScript逻辑
变量定义：
- 定义了
targetUrl变量存储目标跳转网址，初始值为https://www.fulicode.cn，可以根据实际需求轻松修改。 - 定义了
jumpSeconds变量设置跳转前等待的秒数，默认为1秒，也可按需调整。
- 定义了
页面跳转逻辑：
- 使用
window.onload事件监听页面加载完成。 - 当页面加载完成后，通过
setTimeout函数启动定时器，在jumpSeconds秒后（乘以1000转换为毫秒），使用window.location.href将页面跳转到targetUrl指定的网址。
- 使用
三、使用方法
- 将上述代码复制到一个文本编辑器中。
- 根据自己的需求修改
targetUrl变量为你想要跳转的目标网址。 - 可以调整
jumpSeconds变量来改变跳转前的等待时间。 - 保存文件，将文件扩展名修改为
.html。 - 用浏览器打开该HTML文件，即可看到效果。
通过这个简单的HTML跳转页面源码，你可以快速搭建一个美观且实用的跳转页面。无论是用于网站的临时过渡页面，还是引导用户进入特定页面，都能为用户带来不错的体验。希望这个源码分享对你有所帮助！如果你在使用过程中有任何问题，或者有更好的优化建议，欢迎交流分享。
