「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

前面几个小节都要提到Box-Shadow，这个小节让我们来真正感受它的强大吧。话不多说，直接看上图

这个扑通扑通跳动的心，就是Box-Shadow制作的。如果你看过前面小节《CSS3 Box-Shadow Loading，创造无限可能》，应该看到这个效果，就可以自己动手做了。

下面我们一起动手试试吧

绘制心形

<div class="heart"></div>

css

.heart {
  font-size: 30px;
  width: 1em;
  height: 1em;
  color: red;
  background-color: currentColor;
  border-radius: 50%;
}

(0,0)坐标点，下面我们画出更多的点

.heart {
  ...
  box-shadow:
    /* 左边上方2个点 */
    -3.3em -3.3em, 
    -2.2em -3.3em,

    /* 右边上方2个点 */
    2.2em -3.3em, 
    3.3em -3.3em,

    /* 左边第二排四个点 */
    -4.4em -2.2em, 
    -3.3em -2.2em, 
    -2.2em -2.2em, 
    -1.1em -2.2em,

    /* 右边第二排四个点 */
    1.1em -2.2em, 
    2.2em -2.2em, 
    3.3em -2.2em, 
    4.4em -2.2em;
}

依次类推，我们画出全部的点

下面我们让心跳起来，看图一，我们的心是从一个点，变换成多个点，从而形成心形的。ok，我们就先不加box-shadow，动画的时候再加上

...
.heart {
  /* box-shadow ... 去掉 */
  animation: heart 1s infinite alternate;
}

@keyframes heart {
  to {
    box-shadow:
    /* 左边上方2个点 */
    -3.3em -3.3em, 
    -2.2em -3.3em,

    /* 右边上方2个点 */
    2.2em -3.3em, 
    3.3em -3.3em,

    /* 左边第二排四个点 */
    -4.4em -2.2em, 
    -3.3em -2.2em, 
    -2.2em -2.2em, 
    -1.1em -2.2em,

    /* 右边第二排四个点 */
    1.1em -2.2em, 
    2.2em -2.2em, 
    3.3em -2.2em, 
    4.4em -2.2em;
    color: hsla(0, 100%, 50%, 0.6);
  }
}

好像效果一般，没有图一那么扑通扑通的感觉，这个就没有那么生动了。是什么原因导致的了？

动画的速度曲线导致的，这里没有设置animation-timing-function。默认是ease，动画以低速开始，然后加快，在结束前变慢，我们采用cubic-bezier，贝塞尔曲线来对动画速度曲线进行描述

.heart {
  /* box-shadow ... 去掉 */
  animation: heart 1s infinite alternate  cubic-bezier(0.5, 1.7, 0.5, 1.5);
}

这样效果就和图一一致了哦。

小结

本小结知识:

1、Box-Shadow 坐标系

2、Box-Shadow 多阴影

3、animation 动画（仅执行一次：forwards，永久执行 infinite），alternate（动画轮流反向播放。）

4、animation 动画的速度曲线。linear 动画从头到尾的速度是相同的；ease 默认。动画以低速开始，然后加快，在结束前变慢；ease-in 动画以低速开始；ease-out 动画以低速结束；ease-in-out 动画以低速开始和结束；cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

小伙伴们，有问题可以评论区留言哦，欢迎大家点评。需要源码的小伙伴可以购买，私信我哦。

谢谢大家一直以来的支持。