CSS/SCSS制作心跳动画1.动画心电图数据需要动画曲线。心跳曲线自然就是心电图。随便在网上找一个类似的，选一个完整的part1.横向10等份找基线，横向分成10等份。整个画面是一个心跳周期，10个等分会很容易算出时间，对应关键帧中的10%20%30%...2.垂直10等分以基线为基准，最高位置上半部分为最高点，从基线到最高10等分。将上面的坐标复制到下面。3.找到曲线中的关键点找到曲线的关键点，这些就是我们要在动画中记录的变化位置2.编写动画css拿到图形数据后，我们需要对其进行编码。其实就是把上面的每个关键点都写到动画css的关键帧里面。这里我们用SCSS写，因为它可以使用计算。SCSS的使用教程在这里：SCSS日常基本使用原理动画时间轴图中横向1-10分别对应关键帧中的from、10%、20%、30%...tocss缩放实现css中的transform:scale()实现图形的放大缩小css动画的缩放比例如何计算？它表示从基线位置到图中最高点的距离，从而可以计算每个关键点的增量。比如：第二个关键点的位置差不多（水平12%，垂直10%），那么css关键帧就是写SCSS动画//定义一个变量：increase$max-amplitude:0.2;//第一帧增加是：$max-amplitude*0.1@keyframesheart-bounce{from{transform:scale(1);}12%{transform:scale(1+$max-amplitude*0.1);}to{transform:scale(1);}}根据图片中的位置完成所有关键点是@keyframesheart-bounce{from{transform:scale(1);}12%{transform:scale(1+$max-amplitude*0.1);}20%{transform:scale(1-$max-amplitude*0.05);}28%{transform:scale(1-$max-amplitude*0.1);}32%{transform:scale(1+$max-amplitude*1);}38%{transform:scale(1-$max-amplitude*0.2);}50%{transform:scale(1-$max-amplitude*0);}58%{变换：比例（1-$max-amplitude*0.1）；}70%{变换：比例（1-$max-amplitude*0.5）;}80%{变换：比例（1-$max-amplitude*0.1）;}to{transform:scale(1);}}生成的css是这样的@keyframesheart-bounce{from{transform:scale(1);}12%{变换：比例（1.02）；}20%{变换：比例（0.99）；}28%{变换：缩放e(0.98);}32%{变换：比例（1.2）；}38%{变换：比例（0.96）；}50%{变换：比例（1）；}58%{变换：比例（0.98）；}70%{变换：比例（0.9）；}80%{变换：比例（0.98）；}到{转换：规模（1）;}}/*#sourceMappingURL=heartbeat.css.map*/这个动画代码就出来了，然后定义一个类名.heart-beat来调用这个animation.heart-beat{animation-duration:1s;//一个完整动画的持续时间animation-iteration-count:infinite;//动画循环次数：无限循环animation-name:heart-bounce;//要调用的动画名称，对应上面的.heart-bounce}这样，在你需要跳转的图片或文字上使用这个类，效果如图：
