下面是一些关于 HTML 动画效果的基本知识和技术要点：
1. CSS3 动画
CSS3 引入了 transition 和 animation 属性，允许开发者轻松地创建平滑的过渡效果和复杂的动画序列。
- Transitions (过渡): 这种类型的效果用于改变一个元素从一种样式到另一种样式的过渡方式。
transition-property: 定义应用过渡的属性。transition-duration: 定义过渡的持续时间。transition-timing-function: 控制过渡的速度曲线。transition-delay: 定义过渡开始前的延迟。
- Animations (动画): 更复杂的效果，可以控制多个属性的变化，并且可以定义多个关键帧。
@keyframes: 定义动画的关键帧。animation-name: 引用 @keyframes 规则。animation-duration: 动画的持续时间。animation-timing-function: 控制动画的速度曲线。animation-delay: 动画开始前的延迟。animation-iteration-count: 动画播放次数。animation-direction: 控制动画是否反向播放。animation-fill-mode: 定义动画完成后的样式。
2. JavaScript 动画
JavaScript 提供了更高级的控制，可以用来创建交互式动画。
- RequestAnimationFrame: 是一个函数，它告诉浏览器你希望执行一个动画，并请求浏览器在下一次重绘之前调用指定的函数来更新动画。
requestAnimationFrame(callback): 注册一个回调函数，在下一次重绘之前被调用。cancelAnimationFrame(id): 取消一个先前通过 requestAnimationFrame 请求的帧。
- DOM Manipulation: 通过直接操作 DOM 元素来改变它们的位置、尺寸等属性。
- 第三方库: 如 GreenSock (GSAP), anime.js, Popmotion 等，这些库提供了丰富的动画功能，简化了动画的创建过程。
3. SVG 动画
SVG (Scalable Vector Graphics) 允许使用 <animate> 和 <animateTransform> 元素来创建动画。
<animate>: 改变一个或多个属性值。<animateTransform>: 改变元素的变换。
示例
下面是一个简单的 CSS3 动画示例，展示如何制作一个旋转的盒子：
Html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>CSS3 Animation Example</title>
6<style>
7.box {
8 width: 100px;
9 height: 100px;
10 background-color: red;
11 margin: 50px auto;
12 animation-name: spin;
13 animation-duration: 2s;
14 animation-iteration-count: infinite;
15}
16
17@keyframes spin {
18 from { transform: rotate(0deg); }
19 to { transform: rotate(360deg); }
20}
21</style>
22</head>
23<body>
24<div class="box"></div>
25</body>
26</html>
这段代码定义了一个名为 .box 的类，它会在页面加载后无限循环旋转。
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
