CSS关键帧动画：元素绕椭圆圆周运动的实现（一）

马黑黑 · 发表于 2024-5-21 12:38

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

当一个元素的宽高尺寸不同，比如宽度大于高度，我们只需要设置好 border 和 border-radius 属性，即边框和边框角半径，就可以做出一个椭圆形的形状。看效果和代码：

<style>

.eBox {

margin: auto;

width: 400px;

height: 240px;

border: 1px solid gray;

border-radius: 50%;

position: relative;

}

</style>

400*240的宽高，1像素的实线边框，50%的边框角半径，椭圆形的框架就出来了。不过非常遗憾，它连跑道都不是，它只是一个场所——即一个父元素，我们的预期是它的子元素在这个椭圆上奔跑。好吧，我们需要在它上面安个真正的跑道，跑道就和这个框架一样并且相贴合。跑道的承建商是 svg，svg将 path 路径赋予子元素一个 offset-path 属性，字面意思是偏移路径，实际意义是创建一个路径，然后运动员身份的子元素在这条路径上以不同的 offset-distance 即偏移距离出现就产生了位置的转换即奔跑的效果。先来看看 li-zi 元素的CSS代码：

li-zi {

position: absolute;

width: 30px;

height: 30px;

background: plum;

offset-path: path('M0 120 A200 120 0 1 1 400 120 A200 120 0 1 1 0 120');

}

li-zi是我们自定义的一个元素名称，上面的代码是它的CSS样式：绝对定位、30*30的尺寸、梅红的背景色，第6行是关键，属性 offset-path 创建了一条无形的 svg 路径 path，路径的具体内容使用 svg 路径描述语言描述，在小括号里用小角引号包裹起来，大致意思是：这条路径，移动到 (0,120)，从这个地方开始画一条弧线，再画一条弧线，两条弧线合起来就形成了椭圆形跑道。手绘这样的路径相对麻烦，可以使用工具，我这里做有一个，SVG基本图形转路径，选择svg基本图形中的椭圆即 ellipse 后设置好红色的数字，width、height 是父元素宽高，cx、cy是父元素椭圆圆心坐标，rx 是大圆半径，ry 是小圆半径，确定后如果满意，复制后变提供的路径数据就妥了。

将上面的 li-zi 代码加入到我们的路径工程，看看怎么样？完整代码：

<style>

.eBox {

margin: auto;

width: 400px;

height: 240px;

border: 1px solid gray;

border-radius: 50%;

position: relative;

}

li-zi {

position: absolute;

width: 30px;

height: 30px;

background: plum;

offset-path: path('M0 120 A200 120 0 1 1 400 120 A200 120 0 1 1 0 120');

}

</style>

<li-zi></li-zi>

</div>

效果：

从效果中大家应该能够发现：子元素一旦拥有 offset-path 属性，子元素的位置就会受到 offset-path 给出的 path 路径的影响，它已经去到了路径开始的地方 (0,120)，但要特别注意，这需要一个前提：父元素相对定位 relative、子元素绝对定位 absolute。现在，我们要让 li-zi 小矩形移动起来，这需要用到 CSS关键帧动画 @keyframes 控制元素在偏移路径上的偏移距离 offset-distance，试看代码：

@keyframes move {

from { offset-distance: 0; }

to { offset-distance: 100%; }

}

然后我们在 li-zi CSS样式代码中加入 animation 属性就大功告成：

上述 li-zi 元素做椭圆形运动的完整代码：

<style>

.eBox {

margin: 20px auto;

width: 400px;

height: 240px;

border: 1px solid gray;