React项目中building-blocks.css加载动画失效，求正确实现方案

DevOps 小满

2026-8-9

React中whirl building-blocks加载动画不生效的解决办法

核心问题：DOM结构不匹配

你只用空<div className="building-blocks" />肯定不行——这个动画的CSS依赖内部子元素，空div满足不了动画的结构要求。

正确实现步骤

1. 确认CSS引入无误

在React项目里，两种引入方式都可以：

组件内直接import：

import './building-blocks.css'; // 路径换成你存放CSS的实际位置

或者在public/index.html里用link标签引入（把CSS放到public文件夹下）。

2. 使用正确的DOM结构

根据whirl的building-blocks动画设计，你需要给父元素添加3个空span子元素，React代码写成这样：

<div className="building-blocks">
  <span></span>
  <span></span>
  <span></span>
</div>

如果你的CSS里没有给.building-blocks设置宽高，手动加上行内样式兜底：

<div className="building-blocks" style={{ width: '64px', height: '64px' }}>
  <span></span>
  <span></span>
  <span></span>
</div>

3. 排查样式覆盖问题

打开浏览器开发者工具，检查以下几点：

确认.building-blocks的position: relative、宽高样式是否生效
检查子span的animation属性有没有被其他CSS（比如Tailwind、CSS Modules）覆盖

如果用了CSS Modules，类名会被哈希化，这时候要改成：

import styles from './building-blocks.module.css';
// ...
<div className={styles['building-blocks']}>
  <span></span>
  <span></span>
  <span></span>
</div>

4. 最小示例测试

写个极简组件测试，排除其他代码干扰：

import React from 'react';
import './building-blocks.css';

export default function BuildingBlocksLoader() {
  return (
    <div className="building-blocks" style={{ width: '64px', height: '64px' }}>
      <span></span>
      <span></span>
      <span></span>
    </div>
  );
}

在App.js里引入这个组件，看动画是否正常运行。