主页 / user-26786527

Jay Stewart's questions

Martin Hope
Jay Stewart
Asked: 2024-08-13 05:13:14 +0800 CST
  • 8

我有一颗行星，我赋予了它一个线性渐变，我试图让岩石围绕行星的周边，同时让行星上一些可见的天气看起来就像台风在行星上徘徊一样。

目标是制作一颗行星，行星上有绕行的岩石，用户可以移动光标轻轻推动岩石，以获得炫酷的效果。这可能需要 javascript，但我将首先解决第一个项目。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
}

.planet,
.planet2 {
  position: absolute;
  margin: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-60%, 0);
  height: 1100px;
  width: 900px;
  border-radius: 50%;
  z-index: 2;
  background: linear-gradient(40deg, #4a190290 20%, #7b222235, #2b2a29df);
  box-shadow: -20px -20px 40px 40px #801a1a6f inset, 0 0 20px 40px #cb221f90;
}

.astroid__belt {
  width: 100%;
  height: 100%;
  top: 10%;
  left: calc(50% - 50%);
  transform-style: preserve-3d;
  transform: perspective(1000px);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.planet2 {
  position: absolute;
  background: linear-gradient(45deg, transparent 50%, #ac4444, #b90f0fde, #542408b0);
  z-index: 3;
}

.astroid1 {
  position: relative;
  top: 10%;
  width: 200px;
  height: 400px;
  left: calc(50% - 200px);
  background-color: #090606;
  border-right: 3px solid transparent;
  border-radius: 50%;
  z-index: 2;
  animation: animateAstroid 7s linear infinite;
  transform: tranzlateZ(550px);
}

.astroid__belt .astroid {
  position: absolute;
  inset: 0 0 0 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.astroid,
div {
  position: absolute;
  transform-style: preserve-3d;
  border-radius: 70%;
}

@keyframes animateAstroid1 {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(75deg) rotateZ(360deg);
  }
}

@keyframes animateAstroid2 {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(20deg) rotateZ(360deg);
  }
}
<div class="astroid__belt">
  <div class="astroid1"></div>
  <div class="astroid2"></div>
  <div class="astroid3"></div>
  <div class="astroid4"></div>
  <div class="astroid5"></div>
  <div class="astroid6"></div>
  <div class="astroid7"></div>
  <div class="astroid8"></div>
  <div class="astroid9"></div>
  <div class="astroid10"></div>
  <div class="astroid12"></div>
</div>
<div class="planet"></div>

我尝试让行星周围的环像行星正常旋转一样，而不仅仅是在二维空间中。

html