CSS中的motion path模块如何使用

这篇文章主要讲解了“CSS中的motion path模块如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS中的motion path模块如何使用”吧！什么是 CSS Motion Path 运动路径？利用这个规范规定的属性，我们可以控制元素按照特定的路径进行位置变换的动画。并且，这个路径可以是非常复杂的一条路径。在进一步介绍 CSS Motion Path 之前，我们先看看使用传统的 CSS 的能力，我们如何实现路径动画。在之前，我们希望将一个物体从 A 点直线运动到 B 点，通常而言可以使用transform: translate()、top | left | bottom | right或者 是margin之类的可以改变物体位置的属性。简单的一个 Demo：当然，CSS 也可以实现一些简单的曲线路径动画的。如果我们希望从 A 点运动到 B 点走的不是一条直线，而是一条曲线，该怎么做呢？对于一些简单的圆弧曲线路径，还是可以借助一些巧妙的办法实现的，看看下面这个例子。这次，我们使用了两个元素，子元素是希望被曲线运动的小球，但是实际上我们是通过设定了父元素的transform-origin，让父元素进行了一个transform: rotate()的运动带动了子元素的小球：使用纯 CSS 的方法，没办法实现更复杂的路径动画。
直到现在，我们有了一种更为强大的专门做这个事情的规范，也就是本文的主角 —CSS Motion Path。CSS Motion Path 规范主要包含以下几个属性：offset-path：接收一个 SVG 路径（与 SVG 的path、CSS 中的 clip-path 类似），指定运动的几何路径offset-distance：控制当前元素基于offset-path运动的距离offset-position：指定offset-path的初始位置offset-anchor：定义沿offset-path定位的元素的锚点。 这个也算好理解，运动的元素可能不是一个点，那么就需要指定元素中的哪个点附着在路径上进行运动offset-rotate：定义沿offset-path定位时元素的方向，说人话就是运动过程中元素的角度朝向下面，我们使用 Motion Path 实现一个简单的直线位移动画。offset-path接收一个 SVG 的 path免费云主机域名 路径，这里我们的路径内容是一条自定义路径path("M 0 0 L 100 100")，翻译过来就是从0 0点运动到100px 100px点。通过控制元素的offset-distance从0%变化到100%进行元素的路径动画。当然，上述的动画是最基本的，我可以充分利用 path 的特性，增加多个中间关键帧，稍微改造下上述代码：上面的运动轨迹都是由直线构成，下面我们看看如何使用 CSS Motion Path 实现曲线路径动画。其实原理还是一模一样，只需要在offset-path: path()中添加曲线相关的路径即可。在 SVG 的 Path 中，我们取其中一种绘制曲线的方法 — 贝塞尔曲线，譬如下述这条 path，其中的 path 为d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80"：对应这样一条连续的贝塞尔曲线，将对应的路径应用在offset-path: path中：可以看到，元素是沿着贝塞尔曲线的路径进行运动的，并且，由于这次没有限制死offset-rotate，元素的朝向也是跟随路径的朝向一直变化的。（可以联想成开车的时候，车头一直跟随道路会进行变化的，带动整个车身的角度变化）OK，那么接下来，我们再看看offset-anchor如何理解。还是上述的 DEMO，我们把小正方形替换成一个三角形，并且把运动的曲线给画到页面上，像是这样：其中，三角形是通过clip-path实现的：通常而言，沿着曲线运动的是物体的中心点（类比transform-origin），在这里，我们可以通过offset-anchor改变运动的锚点，譬如，我们希望三角形的最下方沿着曲线运动：OK，上面我们基本把原理给过了一遍，下面我们就看看，运用 Motion Path，可以在实践中如何运用。利用运动路径，我们可以制作一些简单的按钮点击效果。其原理是运用了background-radial去生成每一个小圆点，通过控制background-position控制小圆点的位移但是小圆点的运动路径基本上都是直线，运用本文的 Motion Path，我们也可以实现一些类似的效果，核心代码如下，HTML 这里我们使用了Pug模板，CSS 使用了SASS：别看代码多有一点点复杂，但是不难理解，本质就是给每个子元素小点点设置同样的offset-path: path()，给不同分组下的子元素设定不同的旋转角度，并且利用了动画延迟animation-delay设定了 4 组同时出发的动画。感谢各位的阅读，以上就是“CSS中的motion path模块如何使用”的内容了，经过本文的学习后，相信大家对CSS中的motion path模块如何使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: golang形参要求是什么

本文小编为大家详细介绍“golang形参要求是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“golang形参要求是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 Go语言中函数的参数就是形参，它是局部变量，其值由参数调用者…