Orbit CSS 框架使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00922/article/details/146995221

Orbit CSS 框架使用教程

orbit 💫 Orbit is a general-purpose CSS framework designed for building any kind of radial UI. 项目地址: https://gitcode.com/gh_mirrors/orbit14/orbit

1. 项目介绍

Orbit 是一个通用的 CSS 框架，旨在帮助开发者构建任何类型的径向用户界面。它通过预定义的 CSS 类来简化径向 UI 的构建过程，无需使用 JavaScript 或其他编程语言来计算角度、半径和距离。Orbit 提供了简单性和高效性，同时保持了极高的灵活性和自定义选项，使得开发者能够创造出吸引人的设计。

2. 项目快速启动

首先，您需要获取 Orbit 的文件。有三种获取方式：

下载文件：下载 CSS 文件 orbit.css 或 orbit.min.css，以及 JS 文件 orbit.js 或 orbit.min.js。
使用 CDN：直接在 HTML 中引入 CDN 链接。
通过 npm 或 yarn 安装：使用命令 npm install @zumer/orbit 或 yarn add @zumer/orbit。

接下来，将 Orbit 文件添加到您的项目中：

<head>
  <link rel="stylesheet" href="path/to/orbit.css">
  <script src="path/to/orbit.js"></script>
</head>

或者使用 CDN：

<head>
  <link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
  <script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>
</head>

快速启动示例：

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-2 range-180 from-180">
      <o-arc shape="circle" class="shrink-50"></o-arc>
    </div>
    <div class="orbit-3 range-270">
      <o-arc shape="circle" class="shrink-50"></o-arc>
    </div>
  </div>
</div>