html - 星夜动画的关键帧

Question

我正在学习 css3 动画并试图理解 Night sky with twinkling stars - CSS3 only

我能理解云的运动，但对星星闪烁的动画了解不多。

据我所见，http://www.script-tutorials.com/demos/360/images/stars.png 只是一张在深色背景上有星星的静态图片。

http://www.script-tutorials.com/demos/360/images/twinkling.png 只是一个深色背景(我在这里没有看到任何特别的东西，除非我错过了什么？ ) 我看到动画 move-twink-back 只是移动这个 png 来实现这个动画。怎么会这样？

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}



@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

Answer 1

实际上，http://www.script-tutorials.com/demos/360/images/twinkling.png 不仅仅是一个黑暗的背景。它有一些具有不同 opacity 级别的暗区，因此当它使用 opacity 的这些变体通过 animation 淡入和淡出时，效果基本上是以一种聪明的方式发生的。

在新标签中打开图片，按F12打开DevTools(在Chrome或Firefox中)，找到body元素，改变它background 到 white，你会看得更清楚。