cubic-bezier生成器

马黑黑

cubic-bezier() 是CSS三次贝塞尔缓动函数，用以描述CSS关键帧动画从开始到结束变速的过渡效果。语法 cubic-bezier(x1, y1, x2, y2)，参数分别为曲线两个控制点的坐标值，x值必须在 0~1 范围内取值（包括0和1），y值允许突破（突破时动画会出现“反弹”效果）。

点击以下大圆球，圆球会依据当下的 cubic-bezier 设置移动。要改变 cubic-bezier 参数，请依次拖曳坐标系的两个小彩球到合适的位置。

起

终

南无月

语法 cubic-bezier(x1, y1, x2, y2)，参数分别为曲线两个控制点的坐标值，x值必须在 0~1 范围内取值（包括0和1），y值允许突破（突破时动画会出现“反弹”效果）。

还会反弹？这事儿比较好玩了。

南无月

小球怎么扯也没超过1，看来需要手工大于1，很期待这个效果。。必定好玩。。

南无月

这个演示看着效果出数据，再抄下来，做贴子的人第一感觉是好用。。
嗯，看了下颜值也挺高，帅。。

马黑黑

南无月 发表于 2024-6-25 18:11
这个演示看着效果出数据，再抄下来，做贴子的人第一感觉是好用。。
嗯，看了下颜值也挺高，帅。。{:4_173: ...

还是可以再丰富一下，不过算了，还是去喝花酒吧

红影

这个好，可以直接看到调整两个小球后的效果了

红影

想得到什么效果，可以到这个帖子里来找了。
这个完全没法根据数字去猜想效果，只能在这里看了

马黑黑

红影 发表于 2024-6-25 21:36
这个好，可以直接看到调整两个小球后的效果了

马黑黑

红影 发表于 2024-6-25 21:38
想得到什么效果，可以到这个帖子里来找了。
这个完全没法根据数字去猜想效果，只能在这里看了

这类工具网上有很多，我这是挑战一下，看做不做得出来

红影

马黑黑 发表于 2024-6-25 22:11

在里面调了好半天，这个太直观了，真的太好了

红影

马黑黑 发表于 2024-6-25 22:11
这类工具网上有很多，我这是挑战一下，看做不做得出来

黑黑不但做出来了，而且特别好

马黑黑

红影 发表于 2024-6-26 12:08
在里面调了好半天，这个太直观了，真的太好了

工具到处有的，我说过，它们更全面。例如这个：

https://cubic-bezier.com/

马黑黑

红影 发表于 2024-6-26 12:08
黑黑不但做出来了，而且特别好

过得去吧，非专业的

红影

马黑黑 发表于 2024-6-26 12:09
工具到处有的，我说过，它们更全面。例如这个：

https://cubic-bezier.com/

哦，这个还有个作为比较的方块。

红影

马黑黑 发表于 2024-6-26 12:10
过得去吧，非专业的

好用的就好啊，而且原创的，更厉害呢

南无月

马黑黑 发表于 2024-6-25 18:12
还是可以再丰富一下，不过算了，还是去喝花酒吧

好哒~~去喝吧，
这个已经很好用了。。多喝几次，多出几个小工具

马黑黑

南无月 发表于 2024-6-26 17:56
好哒~~去喝吧，
这个已经很好用了。。多喝几次，多出几个小工具

南无月

马黑黑 发表于 2024-6-26 18:23

老师去瞧一眼，我跟了一个贴子

马黑黑

南无月 发表于 2024-6-26 18:48
老师去瞧一眼，我跟了一个贴子

好滴

马黑黑

红影 发表于 2024-6-26 16:56
哦，这个还有个作为比较的方块。

是的