CSS3-Animations - 无限旋转高分辨率图像，盒子阴影脉冲发光

Question

更新

现在测试了一些其他解决方案并创建了一个小提琴。此 Fiddle 中的代码是正确的，但某些浏览器无法显示动画。但是现在每个人都可以现场看到我的表演杀手。 =D 我希望这有助于找到创建此动画的更好解决方案！

Click here

经过数小时的替代方案测试后，我无法提高我在 Firefox 25 或 Internet Explorer 10 中的性能。（Chrome 目前使用 15% 的 i7-CPU）在我的项目中，我有一个流体 div-Container，它可以在当前显示上调整大小-解决。这个 div-Container 有圆形边框（50%）并显示为一个圆圈（不完美，但这是另一个错误？！）。在这个 div-Container 中，我有一个高分辨率图像 (2880px*2880px)，它根据 div-Container 的高度和宽度调整大小。 div-Container 可以无限旋转，并且在其周围还具有发光的脉冲效果。 发光的脉冲效果（box-shadow）会改变颜色和宽度，并在流体 div-Container 周围显示为一个圆圈。

我尝试使用 flash、jquery 和 GIF-Images 重建这些效果。 Flash 在这种高分辨率下也存在性能问题。 jQuery 的 FPS 很低，而且看起来不太好。具有此分辨率的 GIF 图像会变大。

下面是一个例子：

HTML 标记

<div id="disk">
   <div id="pulse"></div>
</div>

<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
 function upd() {
  var h = $("body").height();
  $("#disk").height(h / 1.5);
  $("#disk").width(h / 1.5);
            }
  upd();
  window.onresize = upd;
});//]]>
</script>

CSS 标记

#disk {
  border-radius: 50%;
  background-image: url(hires.png);
  background-size: 100% 100%;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  position: absolute;
  animation: rotate 5s infinite linear;
  transform: translateZ(0);
}
@keyframes rotate {
  0% {   transform: rotateZ(0);}
  100% {  transform: rotateZ(359deg); }
}
#pulse {
  position: absolute;
  border-radius: 50%;
  animation: pulse 60s infinite linear;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  transform: translateZ(0);
}
@keyframes pulse {
  0%  { box-shadow: 0 0 50px rgba(255,255,555,0.9); } 
  5%  { box-shadow: 0 0 200px rgba(255, 0, 0,0.9); }
  10% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  15% { box-shadow: 0 0 200px rgba(255, 255, 127,0.9); }
  20% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  25% { box-shadow: 0 0 200px rgba(255, 255, 0,0.9); }
  30% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  35% { box-shadow: 0 0 200px rgba(103, 255, 190,0.9); }
  40% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  45% { box-shadow: 0 0 200px rgba(0, 255, 0,0.9); }
  50% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  55% { box-shadow: 0 0 200px rgba(0, 0, 255,0.9); }
  60% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  65% { box-shadow: 0 0 200px rgba(75, 0, 130,0.9); }
  70% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  75% { box-shadow: 0 0 200px rgba(143, 0, 255,0.9); }
  80% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  85% { box-shadow: 0 0 200px rgba(143, 0, 255,0.9); }
  90% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  95% { box-shadow: 0 0 200px rgba(0,0,0,0.9); }
 100% { box-shadow: 0 0 50px rgba(255,255,555,0.9); }
}

我知道盒子阴影动画是性能杀手。但目前我无法为我的项目制定另一个解决方案。流体 div-Container 的旋转在 Chrome 中使用了我 i7-CPU 的 5%，仅此而已。 （没有脉冲效果）也许我可以删除一些盒子阴影关键帧并最小化这个动画的数量。但我想让我的效果在原始条件下正常工作而不会出现性能问题。

我希望有人可以帮助我。如果需要，我可以为您创建一个示例。 感谢您的关注。

Answer 1

您可能是我遇到的第一个可以从中受益的人，但这让我非常高兴。

纯 Javascript 比 jQuery 快得多。下面的链接使用本机属性 .outerHeight/.outerWidth 与 jQuery .height()/.width() 方法进行基准测试，并显示当对象首先缓存时本机改进了多少。

JS Perf Benchmark

鉴于您的应用程序的处理量要求很高，这可能会显着提高您的 FPS。

或者我的电脑太棒了，讨厌 jQuery。谁知道。快乐的测试:)