首页  >  文章  >  web前端  >  CSS 中的太阳系

CSS 中的太阳系

PHPz
PHPz原创
2024-08-26 06:31:02918浏览

太阳系已经用 CSS 完成了很多次 - 只需搜索 Codepen 即可!那为什么还要再做一次呢?

因为事情变得更好、更简单——我们现在只需几行 CSS 就可以创建一个响应式太阳系。

让我们从一些非常基本的标记开始:

<ol>
  <li class="sun"></li>
  <li class="mercury"></li>
  <li class="venus"></li>
  <li class="earth"></li>
  <li class="mars"></li>
  <li class="jupiter"></li>
  <li class="saturn"></li>
  <li class="uranus"></li>
  <li class="neptune"></li>
</ol>

我们使用有序列表,因为行星是有序的。

接下来,我们取消默认的

    样式,并将其设置为网格:
    ol {
      all: unset;
      aspect-ratio: 1 / 1;
      container-type: inline-size;
      display: grid;
      width: 100%;
    }
    

    现在,对于行星轨迹,我们将使用“网格堆栈”。我们可以简单地堆叠所有网格项,而不是位置:绝对和一堆翻译:

    li {
      grid-area: 1 / -1;
      place-self: center;
    }
    

    通过为每个行星设置一个 --d 变量(直径),使用宽度:var(--d);,我们得到:

    The Solar System in CSS

    酷!让我们使用 ::after 伪元素添加行星:

    li::after {
      aspect-ratio: 1 / 1;
      background: var(--b);
      border-radius: 50%;
      content: '';
      display: block;
      width: var(--w, 2cqi);
    }
    

    让 ChatGPT 为每个行星生成一些漂亮的径向梯度 - 当我们这样做时,让我们告诉它我们正在创建太阳系并要求行星大小在 1 到 6cqi 之间 - 不完全 准确,但仍保持相当大的、可识别的差异:

    .mercury {
      --b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%);
      --w: 2.0526cqi;
    }
    
    .venus {
      --b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%);
      --w: 2.6053cqi;
    }
    
    .earth {
      --b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%);
      --w: 3.1579cqi;
    }
    
    .mars {
      --b: radial-gradient(circle, #e57373 0%, #af4448 100%);
      --w: 3.7105cqi;
    }
    
    .jupiter {
      --b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%);
      --w: 4.8158cqi;
    }
    
    .saturn {
      --b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%);
      --w: 5.3684cqi;
    }
    
    .uranus {
      --b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%);
      --w: 4.2632cqi;
    }
    
    .neptune {
      --b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%);
      --w: 6cqi;
    }
    

    现在我们有:

    The Solar System in CSS

    为了动画具有不同轨迹速度的行星,我们添加:

    li::after {
      /* previous styles */
      animation: rotate var(--t, 3s) linear infinite;
      offset-path: content-box;
    }
    

    注意偏移路径。这是简化轨迹动画的关键,因为我们要做的就是沿着

  1. 的形状移动行星。是这样的:
    @keyframes rotate {
      to {
        offset-distance: 100%;
      }
    }
    

    仅此而已!我让 ChatGPT 根据“海王星”计算时间,旋转速度为 20 秒 — 我们得到:


    结论

    仅用一些规则,我们就用纯 CSS 创建了一个简单的 2d 版本的太阳系。如果您想深入了解,您可以:

    • 使用实际距离和大小(使用 calc())
      • 添加变换:rotateX(angle)使其成为伪 3D:

    The Solar System in CSS

    ...也许可以使用matrix3d“重新压平”行星?

    编码愉快!

以上是CSS 中的太阳系的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn