Question

我们正在为网站添加月相图标。

我们想要显示每个月亮百分比的图像 - 所以100％是满月，5％是新月等等。Similar example

目前的计划是在阴影的百分比阶段生成100 png的月球图像，并根据需要指向它们。

我找到了CSS animation的代码，这很棒，但我们真的想要静态图片。

我可以使用CSS以百分比阴影增量渲染月球图像吗？

Answer 1

可能不是你想要的，但我写了a JavaScript library to generate moon/planet phase discs。

JS代码实际上只是计算了2张光盘的大小和位置，正如@jcaron在他的回答中所描述的那样，所以如果你不想为此使用脚本，你可以使用库来计算出正确的CSS值并将其手动编码到您的页面中。

Answer 2

只需要有两个光盘，一个在另一个上面，两者之间有正确的偏移。您可以通过一个包含0大小内容（和填充）并且corner-radius设置为边框宽度的框来在CSS中绘制光盘。

Answer 3

我意识到这是一个老问题，但我正在寻找一个类似的解决方案，并根据已经链接的CSS动画开发了PHP的答案。我正在使用来自https://github.com/solarissmoke/php-moon-phase的名为MoonPhase.php的脚本，其中包括进入当前月球周期的天数（返回0到大约29.53之间的数字，0表示新月的开始）。我用它来创建一个函数，让我调整CSS。似乎CSS的数字范围基于绘制的光盘的大小，因此我根据vw编号使条目变量以允许自动屏幕大小调整。这需要通过php推出该块，并且在真实页面中，您可能希望将其保留在当然。

<?php
include("MoonPhase.php");
$moonSize = 10; // output in vw, 10 would equal 10% of screen width

$moon = new Solaris\MoonPhase();
$age = $moon->age(); // or you can provide a number between 0 - 29.53
$pos = moon_pos($age, $moonSize);

echo <<<EOT
<div class="moon"></div>$age
<style>
body {background: #111;}
.moon {
  background: #111;
  border-radius: 50%;
  box-shadow: inset {$pos}vw 0 1px #f5f5f5, 0 0 3px #444;
  display: inline-block;
  height: {$moonSize}vw;
  transform: rotate({$pos}deg);
  width: {$moonSize}vw;
}
</style>
EOT;

function moon_pos($age, $sz) {
  $cycle = 29.53058868;
  $pos = ($age - ($cycle / 2)) * (($sz * 2) / $cycle);
  $pos = ($pos >= 0) ? $sz - $pos : -$sz - $pos;
  return $pos;
}

我对CSS进行了更改，不依赖于颜色名称。我还添加了一个小的褪色边框，这样你就可以随时看到月亮的轮廓，加上一些黑色光盘边缘的模糊。最终输出给出了当前月相的近像素完美渲染。

moon_phase（）的神奇之处在于使用正确的数字来处理CSS。 CSS有一个范围 - $ moonSize到+ $ moonSize，新月（全黑）为0.这恰好与当前周期时代相反，满月在范围的中间，所以我必须进行两步调整才能将29天压缩到正确的范围，然后翻转输出以获得从-10到+10的正确转换。可能有更优雅的方式来做到这一点，但目前的代码有效。

如何在CSS中渲染月相图标？

3 个答案: