本文探讨了在Web开发中实现动画效果，特别是各种移动方式，包括直线移动、曲线移动和路径移动。直线移动可通过计算点的位置和时间比例实现；曲线移动常借助CSS的`cubic-bezier`，但控制复杂；路径移动则推荐使用SVG Animation或JavaScript库如Greensock，以及CSS关键帧动画。利用工具和脚本可将设计稿的关键帧信息转化为动画代码。
在 Web 开发中，经常需要实现各种动画效果，例如：移动、变形、透明度变化等，今天我们主要来讨论各种移动的实现。
直线移动
通常可以直接由各个点的位置，以及到点的时间与整个动画持续时间的比值，写出类似下面的代码并可实现动画。
|
1
2
3
4
5
6
7
8
9
10
|
.cray {
animation: move
2s alternate infinite;
}
@
keyframes move {
0% {
transform:
translate(0, 0); }
30% {
transform:
translate(100px, 0); }
60% {
transform:
translate(100px, 100px); }
100% {
transform:
translate(200px, 0); }
}
|
最低0.47元/天 解锁文章
2829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
