21、Rucksack插件的使用与CSS代码优化

Rucksack插件的使用与CSS代码优化

1. 使用插件进行内容动画

为了展示Rucksack的易用性，这里的示例保持了简单性。最终效果是四个可随意动画的简单方块。以下是具体操作步骤：
1. 从代码下载中提取 T44 - postcss-easings 文件夹的副本，并保存到项目区域的根目录。
2. 将 T44 - postcss-easings 文件夹中的 gulpfile.js 和 package.json 文件复制到项目区域的根目录，替换现有文件或保存备份。
3. 将 css - completed versions 文件夹中的 style – pre-comile.css 文件复制到项目区域的 src 文件夹，并将其重命名为 style.css 。
4. 打开Node.js命令提示符会话，将工作文件夹更改为项目区域。
5. 在命令提示符中输入 Gulp 并按回车键，文件将被编译。
6. 假设编译过程中没有出现问题，将 dest 文件夹的内容复制到 T44 - postcss-easings 文件夹中的 css 文件夹。
7. 在浏览器中预览结果，当鼠标悬停在每个方块上时，动画将启动。

插件配置

postcss-easings </