概览
欢迎使用 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
加载成功
Font Awesome
加载成功