使用纯CSS画一个月球-Toy模板网

我仅使用 CSS 创建了一个逼真的月亮。
让我们直接深入了解分步过程。

纯css编写月球步骤

1、将 div 元素添加到 HTML 文件中并给出类名。

<div class="animated-moon"></div>

2、现在让我们开始使用 CSS 进行制作：
首先为元素提供一个基本形状。

width: 20rem;
height: 20rem;
position: absolute;
 border-radius: 50%;

3、我们需要一张来自Solar System Scope的带有月球纹理的图像，如下所示，可以通过图片链接自行下载

https://www.solarsystemscope.com/textures/download/2k_moon.jpg

4、将其添加为元素的背景图像，并为 X 轴旋转提供一点额外的背景大小。

background-image: url('https://www.solarsystemscope.com/textures/download/2k_moon.jpg')background-size: 110% 100%;

现在是制作旋转且令人眼花缭乱的动画的时刻了。

@keyframes moonRotation {
    0% { background-position: 0% 0%; }
    50% { background-position: 150% 0%; }
    100% { background-position: 300% 0%; }{% embed  %}
}

将此代码添加到您的.animated-moon类中。

animation-name: moonRotation;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;

现在，你的月亮看起来像这样

圆球示例效果

5、现在，您所要做的就是释放盒子阴影属性的超级潜力，为月球创建出色的 3D 效果。

box-shadow: inset -10px 8px 6px -5px #ffffff, // 光线照射在月球上（右上）
inset 20px -20px 50px 43px rgba(0, 0, 0, 0.9), // 月球上的阴影区域
7px -6px 14px rgba(255, 255, 255, 0.3215686275); // 在月球外发光以进行光反射

6、最终输出
CSS画一个月球最终效果图文章来源地址https://www.toymoban.com/diary/web/431.html

完整代码

<!--CSS-->
<style>
body {
  font-family: system-ui;
  background: #000;
  color: white;
  text-align: center;
}

@keyframes moonRotation {
    0% {
    background-position: 0% 0%;
    border: 0px solid #00000000;
  }
  50% {
    background-position: 150% 0%;
    border: 0px solid #00000000;
  }
  100% {
    background-position: 300% 0%;
    border: 0px solid #00000000;
  }
}

.moon-background{
  top: 3.5rem;
  right: 50%;
  display: block;
  width: 20rem;
  height: 20rem;
  position: absolute;
  border-radius: 50%;
  background-image: url('https://www.solarsystemscope.com/textures/download/2k_moon.jpg');
  background-repeat: repeat-x;
  background-size: 110% 100%;
  opacity: 1;
  animation-name: moonRotation;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards !important;
  box-shadow: inset -10px 8px 6px -5px #ffffff,
inset 20px -20px 40px 30px rgba(0, 0, 0, 0.9), 7px -6px 14px rgba(255, 255, 255, 0.3215686275);
}
</style>
<!-- HTML -->
<div class="moon-background"></div>

到此这篇关于使用纯CSS画一个月球的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！