YNXUN API 资源文档

概览

欢迎使用 YNXUN API 资源站!本站点提供本地化部署的前端常用静态资源,无需依赖第三方 CDN,访问速度更快、稳定性更高。

所有资源均支持 HTTPS 访问,可直接在生产环境中使用。

资源优势

  • 永久可用,无 CDN 过期风险
  • 访问速度快,延迟低

资源列表

2.1 Tailwind CSS

版本:最新稳定版

用途:实用优先的 CSS 框架,快速构建自定义界面

访问地址

https://api.ynxun.top/css/tailwind.css
建议在生产环境中使用按需编译后的版本,减少资源体积。

2.2 Swiper

版本:v11.x 最新版

用途:现代化的移动端触摸滑动插件,支持轮播、滑动切换等

访问地址

https://api.ynxun.top/css/swiper-bundle.min.css https://api.ynxun.top/js/swiper-bundle.min.js

2.3 Font Awesome 4.7.0

版本:4.7.0(经典版)

用途:常用矢量图标库,包含 600+ 图标

访问地址

https://api.ynxun.top/css/font-awesome.min.css
图标使用时请使用 fa 前缀(如 fa fa-user),而非 v5+ 的 fas

使用示例

以下是完整的使用示例代码,可直接复制到你的项目中:

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>资源使用示例</title> <link rel="stylesheet" href="https://api.ynxun.top/css/tailwind.css"> <link rel="stylesheet" href="https://api.ynxun.top/css/swiper-bundle.min.css"> <link rel="stylesheet" href="https://api.ynxun.top/css/font-awesome.min.css"> </head> <body> <!-- 测试内容 --> <div class="bg-blue-500 text-white p-4 m-4 rounded">Tailwind 样式测试</div> <i class="fa fa-user text-3xl text-red-500 m-4"></i> <!-- Swiper 示例 --> <div class="swiper w-full h-40 m-4 border rounded"> <div class="swiper-wrapper"> <div class="swiper-slide bg-green-300 flex items-center justify-center">Slide 1</div> <div class="swiper-slide bg-yellow-300 flex items-center justify-center">Slide 2</div> </div> </div> <script src="https://api.ynxun.top/js/swiper-bundle.min.js"></script> <script> // 初始化 Swiper new Swiper('.swiper', { loop: true, autoplay: { delay: 2000 } }); </script> </body> </html>

在线测试

以下区域可直观验证所有资源是否正常加载和工作:

Tailwind CSS

背景红色 + 文字白色

加载成功

Swiper

Slide 1
Slide 2
Slide 3

加载成功

Font Awesome

加载成功

常见问题