css怎么做曲线路径动画

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css怎么做曲线路径动画相关的知识,希望对你有一定的参考价值。

可以的了,你只要控制元素的位置就可以了,用sin和cos来确定元素的left和top 参考技术A 1、svg图片
2、设置svg描边路径,并加入动画animation
3、动画设置stroke-dashoffset:0;stroke-width:0;

CSS3动画常用贝塞尔曲线-效果演示

CSS与贝塞尔曲线

CSS3动画常用贝塞尔曲线实现更加自然,物理感的动画。

列举了一些常见的贝塞尔曲线数值,用于做动画的存档。

.a1
  animation: stretch 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;

技术图片

.a2
  animation: stretch 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;

技术图片

.a3
  animation: stretch 1s cubic-bezier(0.95, 0.05, 0.795, 0.035) infinite;

技术图片

.a4
  animation: stretch 1s cubic-bezier(0.19, 1, 0.22, 1) infinite;

技术图片

.a5
  animation: stretch 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;

技术图片

.a6
  animation: stretch 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;

技术图片

.a7
  animation: stretch 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;

技术图片

以上是关于css怎么做曲线路径动画的主要内容,如果未能解决你的问题,请参考以下文章

[CSS] svg路径动画

如何使用贝塞尔曲线沿路径为图像设置动画

在 Internet Explorer 中的曲线路径上为 SVG 设置动画

动画Bezier曲线,就像在iPhone屏幕上绘制一样

cocos creator基础-(二十九)动画编辑器编辑地图路径

笔记-3.路径动画+小球闯关练习