我仅使用 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 效果。
文章来源:https://www.toymoban.com/diary/web/431.html
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--> <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模板网!