天堂II模版WEB个人02版

newgames001

LOGO进度条引导页加载


进度条加载完毕


进入主界面

功能说明：
黑色质感引导页页面概述这是一个具有黑色质感的引导页，通常用于在用户进入主界面之前展示品牌信息并模拟加载过程，给用户一种科技感和专业感。整体页面采用黑色渐变背景，搭配绿色的元素和特效，营造出神秘而酷炫的氛围。
各部分功能详细介绍HTML 部分

• LOGO 部分：显示名为 “乾坤天堂 II” 的 LOGO，初始状态下透明度为 0，通过 CSS 动画在页面加载 0.5 秒后开始淡入，持续 2 秒，最终完全显示。位置在页面垂直居中偏上，离进度条有一定距离。
• 进度条容器：包含外圆轨道、进度条、进度百分比文本和提示信息文本。初始透明度为 0，同样在页面加载 0.5 秒后开始淡入，持续 2 秒。
  
  • 外圆轨道：一个圆形边框，有多层阴影效果，增强 3D 质感，作为进度条的背景轨道。
  • 进度条：一个圆形进度条，初始时动画处于暂停状态。进度条的颜色和旋转角度会根据加载进度动态变化，并且在加载完成后会持续变色。
  • 进度百分比文本：显示当前的加载进度百分比，初始为 0%，随着加载过程实时更新。
  • 提示信息文本：初始显示 “加载中... 请稍后！”，当加载进度达到 100% 时，显示 “加载完毕，3 秒后进入系统！”
    

CSS 部分

• 全局样式：设置页面背景为从黑色到深灰色的渐变，使用 flex 布局使页面内容垂直和水平居中，同时添加了透视效果。
• 动画效果：定义了 fadeIn 和 fadeOut 两个动画，分别用于元素的淡入和淡出效果。
• 元素样式：为 LOGO、进度条容器、外圆轨道、进度条、进度百分比文本和提示信息文本设置了样式，包括颜色、字体、阴影、渐变、边框等，以实现科技感的视觉效果。
  

JavaScript 部分

• 进度条加载逻辑：在淡入动画完成（2.5 秒后）开始执行加载逻辑，每 25 毫秒更新一次进度，直到达到 100%。
• 颜色变化逻辑：根据进度动态改变进度条的颜色，加载过程中颜色变化速度较快，加载完成后颜色继续以较慢速度变化。
• 页面跳转逻辑：当加载进度达到 100% 后，显示 “加载完毕，3 秒后进入系统！” 提示信息，3 秒后开始淡出动画，再等待 2 秒后跳转到 main.html 页面。
  

多功能主页框架页面概述这是一个多功能的主页框架，具有导航栏、轮播图、特色功能展示区、信息列表和页脚等常见的网页元素，整体采用黑色背景，搭配橙色的强调色，提供简洁而专业的用户界面。
各部分功能详细介绍HTML 部分

• 导航栏：包含 LOGO “乾坤天堂 II” 和多个导航链接，如 “首页”“功能介绍”“信息中心”“联系我们”，方便用户快速访问不同的页面内容。
• 轮播图：展示三张图片，通过 JavaScript 实现每 5 秒切换一次图片的效果，用于吸引用户的注意力并展示重要信息。
• 特色功能展示区：展示三个特色功能，每个功能配有一个 Font Awesome 图标、标题和简要描述，让用户快速了解页面的主要功能。
• 信息列表：显示最新信息，每个信息项包含标题和详细内容，使用网格布局展示，方便用户查看。
• 页脚：显示版权信息，表明页面的版权归属。
  

CSS 部分

• 全局样式：设置页面的字体、背景颜色和文字颜色，确保页面整体风格一致。
• 导航栏样式：设置导航栏的背景颜色、内边距和布局，导航链接在鼠标悬停时会改变颜色，提供交互反馈。
• 轮播图样式：设置轮播图的高度、宽度和溢出处理，图片通过 opacity 属性和过渡效果实现平滑切换。
• 特色功能展示区样式：使用 flex 布局将特色功能水平排列，每个功能项设置了图标颜色、标题字体大小和描述文字颜色。
• 信息列表样式：使用网格布局展示信息项，每个信息项有背景颜色、内边距和圆角边框，提高可读性。
• 页脚样式：设置页脚的背景颜色、文本对齐方式和内边距，使页脚美观且与页面整体风格一致。
  

JavaScript 部分

• 轮播图切换逻辑：通过 querySelectorAll 方法选择所有的轮播图片，使用 setInterval 函数实现每 5 秒切换一次图片的功能。通过 classList 属性添加或移除 active 类来控制图片的显示和隐藏，实现平滑的切换效果。
  

通过网盘分享的文件：天堂2模版02.7z
链接: https://pan.baidu.com/s/1cVdVV8H0qqg7m7C5XplZEA 提取码: x1s8
--来自百度网盘超级会员v1的分享

sunwind

谢谢分享！！！！