HTML欢迎页动画切换问题：笑脸闪烁与欢迎页边框隐藏实现

问题1：笑脸旋转结束后保持角度叠加闪烁效果 #

实现逻辑 #

避免两个动画硬切导致角度重置跳变，按以下步骤处理：

• 先定义单轮播放的旋转动画，明确动画结束时笑脸停留的目标旋转角度
• 监听笑脸元素的animationend事件，确认旋转动画播放完成后，再给元素追加闪烁样式类
• 闪烁类直接把transform属性固定为旋转结束的角度，再叠加无限循环的透明度+亮度变化动画，全程角度不会偏移

核心代码片段 #

/* 基础旋转动画，仅播放1次 */
.smile {
  width: 60px;
  height: 60px;
  animation: rotate 2s ease forwards;
}
@keyframes rotate {
  0% { transform: rotate(-180deg) scale(0.5); opacity: 0; }
  /* 结束角度可根据需求自行修改，闪烁类的角度要和这个值完全一致 */
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}
/* 旋转结束后追加的闪烁类，固定旋转角度 */
.smile.blink {
  animation: blink 1s ease-in-out infinite;
  transform: rotate(0deg);
}
@keyframes blink {
  0%, 100% { opacity: 1; filter: brightness(1); }
  /* 叠加亮度变化比单纯改透明度的闪烁质感更自然 */
  50% { opacity: 0.6; filter: brightness(1.5); }
}

// 监听旋转动画结束，触发闪烁效果
const smileEl = document.querySelector('.smile')
smileEl.addEventListener('animationend', (e) => {
  // 判定是旋转动画结束才加类，避免闪烁动画触发事件造成重复操作
  if(e.animationName === 'rotate') {
    smileEl.classList.add('blink')
  }
}, { once: true })

问题2：欢迎页阶段隐藏全局边框，切到主页后再显示 #

实现逻辑 #

边框显示状态和页面展示阶段绑定，和转场动画节奏对齐：

• 页面初始加载时，给全局边框的承载元素（通常是body或最外层容器）加hide-border类，将边框设为透明
• 监听欢迎页淡出/切换完成事件，在主页面完全展示的时机移除hide-border类，边框会自然显示，不会出现突兀跳变

核心代码片段 #

/* 全局边框默认样式 */
body {
  border: 8px solid #2563eb;
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  /* 加过渡让边框显示更顺滑 */
  transition: border-color 0.3s ease;
}
/* 欢迎页展示阶段隐藏边框 */
body.hide-border {
  border-color: transparent;
}

// 示例：欢迎页展示3秒后切换到主页
setTimeout(() => {
  const welcomeEl = document.querySelector('.welcome-page')
  welcomeEl.classList.add('fade-out')
  // 等欢迎页淡出动画结束再显示边框，节奏完全对齐
  welcomeEl.addEventListener('transitionend', () => {
    document.body.classList.remove('hide-border')
    welcomeEl.remove()
  }, { once: true })
}, 3000)

完整可运行整合代码 #

把原有代码替换为以下内容即可直接看到效果，参数可根据需求自行调整：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态欢迎页</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      border: 8px solid #2563eb;
      min-height: 100vh;
      transition: border-color 0.4s ease;
      font-family: system-ui, sans-serif;
    }
    body.hide-border {
      border-color: transparent;
    }
    /* 欢迎页样式 */
    .welcome-page {
      position: fixed;
      inset: 0;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      transition: opacity 0.5s ease;
      z-index: 999;
    }
    .welcome-page.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    .smile {
      font-size: 80px;
      animation: rotate 2s ease forwards;
    }
    .smile.blink {
      transform: rotate(0deg);
      animation: blink 1.2s ease-in-out infinite;
    }
    .welcome-title {
      font-size: 32px;
      font-weight: 600;
      color: #1e293b;
    }
    /* 主页面样式 */
    .main-page {
      padding: 40px;
    }
    @keyframes rotate {
      0% {
        transform: rotate(-180deg) scale(0.3);
        opacity: 0;
      }
      100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
      }
    }
    @keyframes blink {
      0%, 100% {
        opacity: 1;
        filter: brightness(1);
      }
      50% {
        opacity: 0.5;
        filter: brightness(1.6);
      }
    }
  </style>
</head>
<body class="hide-border">
  <div class="welcome-page">
    <div class="smile">😊</div>
    <h1 class="welcome-title">欢迎访问</h1>
  </div>
  <div class="main-page">
    <h2>主页面内容</h2>
    <p>这里是主页展示区域，边框会在欢迎页消失后自动显示</p>
  </div>
  <script>
    const smileEl = document.querySelector('.smile')
    const welcomeEl = document.querySelector('.welcome-page')
    // 触发笑脸闪烁
    smileEl.addEventListener('animationend', (e) => {
      if(e.animationName === 'rotate') smileEl.classList.add('blink')
    }, { once: true })
    // 欢迎页转主页逻辑
    setTimeout(() => {
      welcomeEl.classList.add('fade-out')
      welcomeEl.addEventListener('transitionend', () => {
        document.body.classList.remove('hide-border')
      }, { once: true })
    }, 3000)
  </script>
</body>
</html>

调整说明 #

• 如果需要修改笑脸旋转结束的停留角度，只要把@keyframes rotate中100%节点的rotate值，和.smile.blink的rotate值改成相同数值即可，不会出现角度跳变
• 边框显示的时机可以根据自身转场动画的时长，修改setTimeout的延迟参数，和动画节奏对齐即可

内容的提问来源于stack exchange，提问作者user14178341