找到
1
篇与
跳转页面设计
相关的结果
-
HTML 跳转页面源码分享 | 打造美观高效的跳转体验 分享一个简单而美观的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跳转页面源码，你可以快速搭建一个美观且实用的跳转页面。无论是用于网站的临时过渡页面，还是引导用户进入特定页面，都能为用户带来不错的体验。希望这个源码分享对你有所帮助！如果你在使用过程中有任何问题，或者有更好的优化建议，欢迎交流分享。
