使用纯CSS画一个月球

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

纯 css 编写月球步骤

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

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、最终输出
文章来源地址 https://www.toymoban.com/diary/web/431.html

完整代码

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

原文地址:https://www.toymoban.com/diary/web/431.html

如若转载，请注明出处：如若内容造成侵权 / 违法违规 / 事实不符，请联系站长进行投诉反馈，一经查实，立即删除！