English
资源说明：在网站上，CSS3 的过渡和动画是当前创建轻量级动画的首选方法。不幸的是，很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己，对你来说，或许Move.js是完美的方案。Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库。本教程将探讨Move.js的基础知识，并提供一个在线demo。
基础知识
Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API。让我们假设有一个带类 box 的 div 元数，当鼠标 移动到 div 上面的时候我们想从左侧移动元素100个像素。在这种情况下，我们的代码如果所示：
.box {
-we
【Move.js简介】
Move.js 是一款轻量级的JavaScript库，专为简化CSS3动画的创建而设计。它提供了一种简洁的API，让开发者能够通过简单的函数调用来实现复杂的CSS3动画效果，避免了直接操作CSS3语法时可能遇到的困难和复杂性。
【基础用法】
在CSS3中，我们通常使用`transition`属性来定义元素在状态变化时的动画效果。例如，要使一个具有`.box`类的div在鼠标悬停时从左侧移动100像素，我们可以这样写：
```css
.box {
-webkit-transition: margin 1s;
-moz-transition: margin 1s;
-o-transition: margin 1s;
transition: margin 1s;
}
.box:hover {
margin-left: 100px;
}
```
而使用Move.js，这个过程变得更简单。只需一行JavaScript代码即可实现相同的效果：
```javascript
move('.box').set('margin-left', 100).end();
```
【入门步骤】
1. **下载与引入**：从Move.js的GitHub页面获取最新版本的库文件，将其解压并复制到项目目录。然后，在HTML文件中引入`move.js`。
```html
Move.js Demo
```
2. **基本HTML结构**：创建一个`.box`类的div元素和一个id为`playButton`的链接，用于触发动画。
```html
Play
```
3. **定义样式**：在`styles.css`文件中设置元素的初始样式。
```css
.box {
margin: 10px;
width: 100px;
height: 100px;
background: #7C9DD4;
box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
display: block;
font-size: 20px;
margin: 20px 10px;
font-weight: bold;
color: #222;
text-decoration: none;
}
```
4. **编写JavaScript**：添加事件监听器，当用户点击`playButton`时，调用Move.js的`x()`方法使`.box`向右平移300像素。
```javascript
document.getElementById('playButton').onclick = function(e) {
move('.box').x(300).end();
};
```
【Move.js方法】
- `set()`：设置元素的CSS属性值，并开始动画。如`set('margin-left', 100)`。
- `x()`：控制元素的水平移动，正数向右，负数向左。
- `y()`：控制元素的垂直移动，正数向下，负数向上。
- `end()`：结束动画并应用最终状态。
【进阶使用】
除了基本的移动，Move.js还支持旋转（rotate），缩放（scale），透明度变化（opacity）等更多CSS3属性的动画。例如，可以使用`rotate(90)`使元素顺时针旋转90度，或者`scale(2)`将元素放大两倍。
Move.js还提供了延迟（delay）、速度曲线（easing）等高级特性，帮助开发者创建更丰富的动画效果。例如，`delay(1)`将在1秒后开始动画，`easeInOutQuad`则定义了一个缓入缓出的动画曲线。
Move.js为开发者提供了一个直观且强大的工具，使得CSS3动画的创建变得轻松易行。通过学习和实践，你可以利用Move.js创造出各种各样的交互式动态效果，提升网页的用户体验。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
