提供一个使用GSAP的dome
时间: 2024-04-15 15:29:53 浏览: 91
下面是一个使用 GSAP(GreenSock Animation Platform)创建动画效果的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
// 创建一个 Tween 动画
gsap.to("#box", { duration: 2, x: 200, rotation: 360, scale: 1.5 });
// 可以链式调用多个 Tween 动画
gsap.to("#box", { delay: 2, duration: 2, y: 200, rotation: -360 });
// 也可以使用回调函数来触发其他动作
gsap.to("#box", {
delay: 4,
duration: 2,
x: 0,
rotation: 0,
scale: 1,
onComplete: function() {
// 动画完成后的回调函数
console.log("Animation completed!");
}
});
</script>
</body>
</html>
```
这个示例代码会在页面上创建一个红色方块,并对其应用一系列的动画效果,包括平移、旋转和缩放。你可以根据需要调整动画的参数和目标元素。记得在使用该代码之前,先引入 GSAP 的 JavaScript 库。
阅读全文