当前位置：首页 > CSS

用css制作月食

2026-03-12 08:45:55CSS

使用CSS制作月食效果

通过CSS的box-shadow和border-radius属性可以模拟月食效果，利用圆形元素和阴影重叠实现视觉差。

HTML结构

<div class="eclipse">
  <div class="moon"></div>
  <div class="shadow"></div>
</div>

CSS样式

.eclipse {
  position: relative;
  width: 200px;
  height: 200px;
}

.moon {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f5f3ce;
  box-shadow: 0 0 20px #f5f3ce;
}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1a1a1a;
  transform: translateX(25%);
  animation: eclipse 4s infinite;
}

@keyframes eclipse {
  0% { transform: translateX(-25%); }
  50% { transform: translateX(25%); }
  100% { transform: translateX(-25%); }
}

动态月食效果优化

通过调整动画关键帧和阴影透明度，可以增强真实感：

.shadow {
  /* 其他属性保持不变 */
  animation: eclipse 8s ease-in-out infinite;
}

@keyframes eclipse {
  0% { transform: translateX(-30%); opacity: 0.7; }
  50% { transform: translateX(30%); opacity: 0.95; }
  100% { transform: translateX(-30%); opacity: 0.7; }
}

月全食与月偏食切换

通过修改阴影覆盖范围实现不同类型月食：

/* 月全食 */
.full-eclipse .shadow {
  width: 110%;
  height: 110%;
}

/* 月偏食 */
.partial-eclipse .shadow {
  width: 80%;
  height: 80%;
}

背景星空效果

添加星空背景增强场景感：

用css制作月食

body {
  background: 
    radial-gradient(ellipse at center, #000000 0%, #1a1a1a 100%);
}

.eclipse::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
  background: 
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" opacity="0.7"><circle cx="50" cy="30" r="1" fill="white"/><circle cx="120" cy="80" r="1.2" fill="white"/>...</svg>');
}