Whirl 项目使用教程

最新推荐文章于 2024-09-24 14:46:16 发布

毕艾琳

最新推荐文章于 2024-09-24 14:46:16 发布

阅读量476

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00059/article/details/137004472

Whirl是一个基于浏览器的开源原型工具，使用简单语法创建交互式网页原型，无需安装，支持实时预览和团队协作，适合快速原型设计和学习Web开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Whirl 项目使用教程

whirl CSS loading animations with minimal effort! 项目地址: https://gitcode.com/gh_mirrors/wh/whirl

1. 项目介绍

Whirl 是一个专注于提供 CSS 加载动画的开源项目，由 jh3y 开发并维护。该项目旨在通过最小的努力实现各种 CSS 加载动画效果。Whirl 项目最初是一个简单的 CSS 文件，用于通过伪元素实现加载动画，现在已经发展成为一个包含多种加载动画的集合。

Whirl 项目的主要特点包括：

简单易用：通过简单的 CSS 类名即可实现复杂的加载动画。
模块化：支持按需引入，避免不必要的资源加载。
开源：基于 MIT 许可证，允许自由使用和修改。

2. 项目快速启动

安装 Whirl

你可以通过 npm 或 yarn 安装 Whirl：

npm install @jh3y/whirl

或者

yarn add @jh3y/whirl

引入 Whirl

在你的项目中引入 Whirl 的 CSS 文件：

import '@jh3y/whirl/dist/whirl.css';

使用 Whirl

在 HTML 中使用 Whirl 提供的类名来实现加载动画：

<div class="whirl dual-ring"></div>

示例代码

以下是一个完整的示例，展示如何在项目中使用 Whirl：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Whirl 示例</title>
    <link rel="stylesheet" href="node_modules/@jh3y/whirl/dist/whirl.css">
</head>
<body>
    <div class="whirl dual-ring"></div>
</body>
</html>