当前位置：首页 > 行业动态 > 正文

html网站开场动画效果模板

admin
行业动态
2025-04-28
6

HTML+CSS+JS打造流畅开场动画，集成Animate.css/Ant Motion等库实现渐现转场、粒子消散等吸睛效果，适配多

常用开场动画类型与实现方案

全屏加载动画

特点：覆盖整个页面,常用于过渡或加载提示。
技术实现：
- CSS动画：通过@keyframes定义渐变、缩放等效果。
- JavaScript：控制动画结束后跳转至主页面。

示例代码：

<div id="loader">
  <div class="loading-bar"></div>
</div>
<style>
  #loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loading-bar {
    width: 5px;
    height: 30px;
    background: #333;
    animation: pulse 1s infinite;
  }
  @keyframes pulse {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.4); }
  }
</style>
<script>
  window.onload = () => document.getElementById('loader').remove();
</script>

渐变过渡动画

特点：背景或元素颜色渐变，营造柔和的开场氛围。
技术实现：
- CSS渐变 + 延迟显示：通过background属性和transition实现。
- JavaScript定时器：控制动画触发时机。

示例代码：

.fade-bg {
  animation: fadeIn 3s forwards;
}
@keyframes fadeIn {
  0% { background: #000; opacity: 0; }
  100% { background: #fff; opacity: 1; }
}

视差滚动动画

特点：多层背景以不同速度滚动，增强立体感。
技术实现：
- CSS transform: translateZ：分层设置不同层级。
- JavaScript监听滚动事件：动态调整层位置。
适用场景：企业官网、个人作品集。

粒子效果动画

特点：利用粒子库（如particles.js）生成动态背景。
技术实现：
- 引入粒子库：通过<script>标签加载。
- 配置参数：调整粒子数量、颜色、交互性。

示例代码：

<div id="particles-wrapper"></div>
<script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
<script>
  particlesJS("particles-wrapper", {
    particles: { number: { value: 100 }, shape: { type: "circle" } },
    interactivity: { detect_on: "canvas" }
  });
</script>

技术选型与工具推荐

动画类型	核心技术	推荐工具/库	适用场景
全屏加载	CSS动画、JavaScript	Animate.css、GSAP	通用加载页
渐变过渡	CSS渐变、关键帧	CSS自定义、CoolKiss.js	简约风格网站
视差滚动	CSS 3D变换、JS事件监听	Parallax.js、GSAP	企业展示、摄影网站
粒子效果	Canvas、WebGL	particles.js、Three.js	科技感、创意类网站