CSS爱心：把你的心我的心串一串

Javanx

发布于 2020-02-19 15:51:42

2980

发布于 2020-02-19 15:51:42

文章被收录于专栏：web秀web秀

前面几个小节都要提到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 的数值。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度