时间戳

首页 > 解决方案 > 星夜动画的关键帧

html - 星夜动画的关键帧

问题描述

我只是在学习 css3 动画，并试图用闪烁的星星来理解夜空 - 仅限 CSS3

我可以理解云的运动，但不能理解星星闪烁的动画。

据我所知， 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;}
}

标签： htmlcssanimationcss-animations

解决方案

其实，http://www.script-tutorials.com/demos/360/images/twinkling.png不仅仅是黑暗background。它有一些不同层次的黑暗区域，所以当它通过使用这些变化opacity淡入和淡出时，效果基本上是以一种巧妙的方式发生的。animationopacity

在新标签页中打开图像，按下F12打开DevTools（在 Chrome 或 Firefox 中），找到body元素，将其更改background为white，您会更好地看到它。

推荐阅读