介绍
在前端开发中，往往需要实现一些页面装饰效果，比如加载动画、转圈效果等等。为了方便开发者实现这些效果，CSS 界面设计师 Chad Gibbons 开发了一个 NPM 包 @chgibb/css-spinners，这个包提供了一系列的 CSS 动画，方便开发者使用。
本文将详细介绍如何在项目中使用 @chgibb/css-spinners 这个 NPM 包，并提供示例代码。
安装
npm install --save @chgibb/css-spinners
使用
@chgibb/css-spinners 的使用非常简单，只需要在 HTML 文件中引用对应的 CSS 文件即可。
例如，要使用 double-bounce 动画，只需要将以下代码插入到你的 HTML 文件里：
<link rel="stylesheet" href="node_modules/@chgibb/css-spinners/dist/spinners/double-bounce.css"> <div class="double-bounce"></div>
在上面的代码中，先引用 double-bounce CSS 文件，然后在 HTML 中插入 div 元素并添加 double-bounce 的类。
常见效果
以下是常见效果的使用方法。
double-bounce
<link rel="stylesheet" href="node_modules/@chgibb/css-spinners/dist/spinners/double-bounce.css"> <div class="double-bounce"></div>
circle
<link rel="stylesheet" href="node_modules/@chgibb/css-spinners/dist/spinners/circle.css"> <div class="circle"></div>
cube
<link rel="stylesheet" href="node_modules/@chgibb/css-spinners/dist/spinners/cube.css"> <div class="cube"></div>
fading-circle
<link rel="stylesheet" href="node_modules/@chgibb/css-spinners/dist/spinners/fading-circle.css"> <div class="fading-circle"></div>
rectangle
<link rel="stylesheet" href="node_modules/@chgibb/css-spinners/dist/spinners/rectangle.css"> <div class="rectangle"></div>
ripple
<link rel="stylesheet" href="node_modules/@chgibb/css-spinners/dist/spinners/ripple.css"> <div class="ripple"></div>
自定义
如果以上效果不符合你的需求，你可以通过一些参数自定义你的效果，比如颜色、大小等等。
以 rectangle 为例，为它添加一个自定义的大小和颜色：
<link rel="stylesheet" href="node_modules/@chgibb/css-spinners/dist/spinners/rectangle.css">
<style>
.my-rectangle { width: 100px; height: 50px; }
.my-rectangle .spinner { background-color: red; }
</style>
<div class="rectangle my-rectangle"></div>如上代码会将 rectangle 的大小调整为 100px * 50px，同时将背景颜色改为红色。
结论
在前端开发中，引用 @chgibb/css-spinners 这个 NPM 包可以轻易地实现一些页面装饰效果，例如加载动画、转圈效果等。本文提供了详细的介绍和使用方法，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e06d1