CSS动画失效求助：WordPress子主题404页伪元素动画不显示

我帮你找到了问题的核心！你的故障动画代码用了Sass（Compass）专属语法，但WordPress子主题的child-theme-style.css默认是作为纯CSS文件加载的，浏览器无法识别Sass的变量、循环和函数，导致伪元素的动画关键帧定义无效，自然看不到动画效果。

问题拆解 #

你写的代码里这些部分都是Sass特有的，普通CSS不支持：

• @import "compass/css3";：Compass框架的导入语句
• $steps:20;：Sass变量定义
• @for $i from 0 through $steps{...}：Sass循环语句
• random(100)：Sass随机函数

浏览器解析这些代码时会直接忽略，所以伪元素的@keyframes动画根本没生效，只有.glitch的基础样式能正常显示。

解决方案：将Sass转成纯CSS #

我已经把你的Sass代码编译成了浏览器能直接识别的纯CSS版本，替换掉子主题child-theme-style.css里的原有代码即可：

.glitch{ 
  color:red; 
  font-size:100px; 
  position:relative; 
  width:400px; 
  margin:0 auto; 
}

@keyframes noise-anim {
  0% { clip: rect(23px, 9999px, 84px, 0); }
  5% { clip: rect(12px, 9999px, 36px, 0); }
  10% { clip: rect(78px, 9999px, 52px, 0); }
  15% { clip: rect(45px, 9999px, 19px, 0); }
  20% { clip: rect(67px, 9999px, 73px, 0); }
  25% { clip: rect(31px, 9999px, 22px, 0); }
  30% { clip: rect(89px, 9999px, 44px, 0); }
  35% { clip: rect(56px, 9999px, 61px, 0); }
  40% { clip: rect(18px, 9999px, 88px, 0); }
  45% { clip: rect(72px, 9999px, 33px, 0); }
  50% { clip: rect(29px, 9999px, 57px, 0); }
  55% { clip: rect(41px, 9999px, 14px, 0); }
  60% { clip: rect(83px, 9999px, 69px, 0); }
  65% { clip: rect(59px, 9999px, 27px, 0); }
  70% { clip: rect(15px, 9999px, 76px, 0); }
  75% { clip: rect(37px, 9999px, 81px, 0); }
  80% { clip: rect(63px, 9999px, 49px, 0); }
  85% { clip: rect(24px, 9999px, 11px, 0); }
  90% { clip: rect(77px, 9999px, 55px, 0); }
  95% { clip: rect(48px, 9999px, 38px, 0); }
  100% { clip: rect(86px, 9999px, 64px, 0); }
}

.glitch:after{ 
  content:attr(data-text); 
  position:absolute; 
  left:2px; 
  text-shadow:-1px 0 red; 
  top:0; 
  color:red; 
  background:black; 
  overflow:hidden; 
  clip:rect(0,900px,0,0); 
  animation:noise-anim 5s infinite linear alternate-reverse; 
}

@keyframes noise-anim-2 {
  0% { clip: rect(62px, 9999px, 34px, 0); }
  5% { clip: rect(17px, 9999px, 79px, 0); }
  10% { clip: rect(43px, 9999px, 26px, 0); }
  15% { clip: rect(75px, 9999px, 58px, 0); }
  20% { clip: rect(28px, 9999px, 13px, 0); }
  25% { clip: rect(51px, 9999px, 82px, 0); }
  30% { clip: rect(39px, 9999px, 47px, 0); }
  35% { clip: rect(87px, 9999px, 66px, 0); }
  40% { clip: rect(21px, 9999px, 32px, 0); }
  45% { clip: rect(54px, 9999px, 71px, 0); }
  50% { clip: rect(19px, 9999px, 85px, 0); }
  55% { clip: rect(46px, 9999px, 25px, 0); }
  60% { clip: rect(73px, 9999px, 53px, 0); }
  65% { clip: rect(33px, 9999px, 16px, 0); }
  70% { clip: rect(68px, 9999px, 80px, 0); }
  75% { clip: rect(22px, 9999px, 42px, 0); }
  80% { clip: rect(57px, 9999px, 74px, 0); }
  85% { clip: rect(14px, 9999px, 36px, 0); }
  90% { clip: rect(70px, 9999px, 59px, 0); }
  95% { clip: rect(49px, 9999px, 29px, 0); }
  100% { clip: rect(81px, 9999px, 63px, 0); }
}

.glitch:before{ 
  content:attr(data-text); 
  position:absolute; 
  left:-2px; 
  text-shadow:1px 0 blue; 
  top:0; 
  color:red; 
  background:black; 
  overflow:hidden; 
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse; 
}

额外优化建议 #

1. 规范加载Google字体：
   把404.php里的字体链接移到子主题的functions.php中，更符合WordPress最佳实践：

   function child_theme_enqueue_varela_font() {
       wp_enqueue_style( 'varela-font', 'https://fonts.googleapis.com/css?family=Varela', array(), null );
   }
   add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_varela_font' );
   

   然后删除404.php里的<link href='https://fonts.googleapis.com/css?family=Varela'...>代码。

2. 对比度检查：
   如果你的404页面背景不是黑色，记得调整伪元素的background属性值，确保和文字有足够对比度，否则动画效果可能不明显。

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