CSS实现经典打字小游戏《生死时速》

🌻 前言

CSS 中有这样一个模块：Motion Path 运动模块，它可以使元素按照自定义的路径进行移动。本文将为你讲解这个模块属性的使用，并且利用它实现我小时候电脑课经常玩的一个打字游戏：金山打字的《生死时速》。

🪴 Motion Path 使用教程

css中有这样一个模块：Motion Path ，它可以实现元素按不规则路径移动。

Motion Path模块包含 offset 的一系列属性，包括以下几个：

• offset-path：设置元素运动路径；
• offset-distance：控制当前元素基于 offset-path 运动的距离；
• offset-anchor：定义元素在路径上移动时的锚点。 简单来说就是，运动元素可能不是一个点，那么就需要指定元素中的哪个点附着在路径上进行运动
• offset-position：指定运动的初始位置；
• offset-rotate：定义沿 offset-path 运动路径移动时元素的朝向；

1. offset-path

offset-path 属性可以取以下几个值来设置元素的运动路径：

• ray()函数：ray([<angle> && <size> && contain?])，设置以射线状路线偏移；
• url()函数：用id选择器绑定页面内联SVG元素中任意图形元素的路径；
• <basic-shape>：一些css的基本形状函数，例如：circle(), ellipse(), inset(), path(), polygon(), rect()等，对于可以设置position位置的circle(), ellipse()，如果没有设置position的话，就会应用offset-position的值；
• box-edge：设置以相对的父元素的边缘为运动路径，例如设置content-box、border-box、fill-box等，可以设置按内容区的边缘还是边框边缘等；

看下面例子就懂了：

下面代码中ray射线运动是设置元素朝70度方向运动200px；
按svg路径运动是让电车以一个五角星的svg的路线运动；
shape图形是让电车以polygon()绘制的菱形运动；
box是在其父盒子边缘运动；
jcode

2. offset-distance

设置运动的距离，可以是值，也可以是百分比，例如设置0%处于初始位置，100%就是移动到路径的终点。所以一般实现元素按不规则路径移动，就是通过animation修改offset-distance实现的。

jcode

3. offset-anchor

设置元素的哪个点沿着路径运动，例如设置offset-anchor: center bottom为元素的底部中心点沿路径移动，其他就不多说了，使用方式和background-position一样。

jcode

4. offset-position

设置运动的起始位置，只能作用于可以设置position的路线.

例如 ray() 射线运动，可以设置起点位置，或者ellipse()、circle()等这些需要设置position的图形元素。而且如果在定义路径时已经写明了position的话，offset-position是不会生效的，例如circle(50% at 25% 25%)

5. offset-rotate

offset-rotate定义元素沿偏移路径定位时的方向，默认的话是元素角度会一直和运动路径的水平角度保持一致，当然你也可以自定义固定角度，或者反向显示元素（reverse）。

看下面例子就明白了&