[CSS] svg路径动画

2023-02-28 03:24:01html-css013

[CSS] svg路径动画,第1张

在制作CSS动画的时候，经常会有这样的需求，

让一个方块 沿着给定的路径 运动。

如果运动路径是不规则的，通过设置 top ， left 的属性值，就显得非常困难了。

这时候可以借助svg来实现。

path 元素的形状是通过它的 d 属性 定义的，

d 属性的值，是一个“命令+参数”的序列。

其中， M 20 30 L 160 180 ，包含了2个命令序列，

M 20 30 ，表示将画笔移动到坐标 20,30 处，

L 160 180 ，表示从画笔当前位置，到 160,180 位置画直线。

path元素支持多种命令，可以参考这里， curve commands

html元素的CSS样式属性 offset-path ，表示 偏移路径 。

通过指定 offset-path 的值为path元素的 d 属性值，我们可以实现元素沿着给定的 path 路径运动。

其中， offset-distance 指定了元素偏移初始位置的百分比。

通过在 @keyframes 中逐帧更改 offset-distance ，可以实现动画效果。

我们修改path的 d 属性为 M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ，

相应的也修改小方块的 offset-path 属性。

就可以实现小方块沿着path运动的效果了。

MDN: paths

MDN: offset-path

MDN: offset-distance

A How-to Guide to SVG Animation

Scalable Vector Graphics (SVG) 2 - Chapter 9: Paths

SVGs 能够很好的在 web 上工作, 剪切和遮罩允许你使用有趣的方式去展示或隐藏 web 图像，使用这些技术也能让的设计变得更加灵活因为你不需要去修改或者创建新的图像——这些都可以用代码来实现。通过结合使用 CSS 和遮罩技术，你将会拥有更多的可能性去使用网络图像。

需要明确的是，遮罩和剪切是通过 CSS 来处理图像的两种不同的方法，让我们从剪切开始吧！

剪切基础

如果你曾经使用过 Photoshop , 你大概已经很熟悉剪切遮罩了。他们有一些共同点，剪切通过放置矢量图形来使用,比如圆和三角形, 在图像和元素的上面矢量图形外面的任何部分都会显示，所有矢量图形边界的外面都将被隐藏。

举个例子，如果一个三角形的剪切遮罩覆盖上树林图像上的话, 你可以看到三角形里面的森林图像。图形的边界被称做剪切路径, 不要和已经废弃掉的 clip 属性混淆，你可以使用 clip-path 去创建一个剪切路径。

遮罩基础

在网页上，遮罩是使用 PNG 图片、CSS 渐变、或一个 SVG 元素来隐藏图片或其它元素的部分。我们将集中注意力在 SVG 图像上，不过请注意遮罩可以使用其他类型的图片或者样式的。

遮罩属性和遮罩元素

仅仅是为了帮助理解, 请记住被遮罩的元素是“原始”（还没有应用遮罩的）图片，你可能不想看到全部的图片,所以使用 CSS mask 属性来完成隐藏部分图片的工作。 mask 是 CSS 一组独立属性的简写 , 我们将接下来会介绍它。SVG 元素被用来给 SVG 内部的图像添加遮罩效果。在接下来的示例中, 遮罩是添加了渐变效果的圆形。

在 SVG 图像上应用 SVG 遮罩元素

为了使用 SVG mask 得到一种感觉，我们将在 SVG 图像上使用遮罩。

这给人的第一印象可能会比较复杂, 但是它可以很好遮罩下面的图像。我们有一张真实的图片作为背景，那么 SVG 在哪里起作用呢？和剪切不同, 这张背景图片技术上来说是在 SVG 元素内部的。我们将使用 CSS 来给图片应用遮罩，属性将来自于 SVG 遮罩元素，在我们的 CSS 中指定一个 mask-element id。

</svg>

<p class="el-loading-text">Loading…</p>

</div>

/* ******************* 加载动画 **************************** */

.el-loading-mask.is-fullscreen { position: fixed}

.el-loading-mask { background-color: hsla(0,0%,100%,.4)!important}

.el-loading-mask { position: absolutez-index: 10000background-color: hsla(0,0%,100%,.9)margin: 0top: 0right: 0bottom: 0left: 0transition: opacity .3s}

.el-loading-mask.is-fullscreen .el-loading-spinner { margin-top: -25px}

.el-loading-spinner { top: 50%margin-top: -21pxwidth: 100%text-align: centerposition: absolute}

.el-loading-mask.is-fullscreen .el-loading-spinner .circular { width: 50pxheight: 50px}

.el-loading-spinner .circular { width: 42pxheight: 42pxanimation: loading-rotate 2s linear infinite}

svg:not(:root) { overflow: hidden}

.el-loading-spinner .el-loading-text { color: #ff495e !important}

.el-loading-spinner .el-loading-text { color: #20a0ffmargin: 3px 0font-size: 14px}

.el-loading-spinner .path { stroke: #ff495e !important}

.el-loading-spinner .path {

animation: loading-dash 1.5s ease-in-out infinite

stroke-dasharray: 90,150

stroke-dashoffset: 0