Magic Animations -岩石教程

特点

丰富的动画效果：包括旋转、缩放、弹跳、淡入淡出等多种效果。
易于使用：通过简单的类名即可应用动画，无需编写复杂的代码。
高度可定制：可以根据需要调整动画的持续时间、延迟和次数。
轻量级：文件体积小，加载速度快，不会显著增加页面负担。
跨浏览器兼容：在现代浏览器中均能良好运行。

使用场景

按钮交互：为按钮添加点击、悬停等交互动画，增强用户体验。
页面过渡：在页面切换或内容加载时添加过渡动画，使过渡更流畅。
元素强调：对特定元素添加动画效果，吸引用户注意力。
加载动画：在内容加载时显示动画，提示用户等待。

安装方式

通过 CDN 引入

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magic/1.1.0/magic.min.css">

下载并引入

从 Magic Animations GitHub 下载库文件。
将文件放入项目中并在 HTML 中引入。

<link rel="stylesheet" href="path/to/magic.min.css">

使用示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Magic Animations Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magic/1.1.0/magic.min.css">
</head>
<body>
  <button class="magictime puffIn">Click Me</button>
</body>
</html>

在这个示例中，我们为按钮添加了 puffIn 动画效果，当页面加载时，按钮将会呈现出放大的效果。

常用 API 介绍

Magic Animations 的使用主要通过添加预定义的类名来实现。以下是一些常用的动画类名：

旋转动画：
- twisterInDown
- twisterInUp
缩放动画：
- puffIn
- puffOut
弹跳动画：
- spaceInUp
- spaceInRight
淡入淡出动画：
- openDownLeft
- openDownRight

自定义动画属性

可以通过 CSS 自定义动画的持续时间、延迟和次数。例如：

.magictime.custom {
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

在 HTML 中使用自定义类：

<div class="magictime puffIn custom">Custom Animation</div>

Magic Animations

特点

使用场景

安装方式

通过 CDN 引入

下载并引入

使用示例

常用 API 介绍

自定义动画属性

官方资料