如何在CSS中呈现月相图标？

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

我们想为每个百分比的月亮显示一个图像，所以100%是满月，5%是新月，等等

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

我找到了a的代码，这很好，但我们确实需要静态图像

---

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

这只是两张光盘的问题，一张在另一张上，两张光盘之间有正确的偏移量。您可以使用CSS绘制光盘，方法是使用一个包含0大小内容（和填充）的框，并将

角半径设置为边框的宽度。
可能不是您想要的，但我已经编写了

JS代码实际上只是计算两张光盘的大小和位置，正如@jcaron在回答中所描述的，因此，如果您不想为此使用脚本，您可以使用该库计算出正确的CSS值并将其手工编码到页面中。
我意识到这是一个老问题，但我正在寻找类似的解决方案，并根据OP链接的CSS动画为PHP开发了一个答案。我正在使用一个名为MoonPhase.php from的脚本，该脚本提供了进入当前月球周期的天数（返回一个介于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;
}

您可以制作一个包含所有相位的单精灵图像，然后切换它们。此外，动画是相当有缺陷的，你可能会从一个径向梯度叠加得到一些灵感，这是非常好的。您将需要一张库存的月球照片，然后使用soemthing作为覆盖的：：after元素，除非您的脚本无法使用javascript接触psuedo元素。返回PNG图像<代码>i
是介于0和1之间的照明。还不了解其他两个参数。请注意，您可以以提供的示例为例，只需删除
@关键帧
和
动画：
，然后根据需要的值设置
框阴影
和
变换
。