html - 用 CSS 让心脏跳动

Question

我用 CSS 做了一颗心。我只是在寻找一种让它跳动/脉动的方法。

这是代码(fiddle):

#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;    
  -webkit-animation: heart 1s linear infinite;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

<div id="heart"></div>

Answer 1

多么可爱的帖子开始了这个夜晚。

当然，这可以通过纯 CSS 实现——您可能对 animations 感兴趣:

CSS

#heart-container {
    width: 100px;
    height: 90px;
    animation: pulsate 0.5s infinite;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

Working example on JSFiddle.

只需将您可爱的心包裹在 #heart-container 中，您就可以开始了。另外，不要忘记在必要时包含供应商特定的前缀。

仅供引用，animation 简写属性 - 类似于 transition - 也接受缓动设置(计时功能)，如 ease-in-out。或者，使用 animation-timing-function。

查看动画缓动 example on JSFiddle .

---

注意

对于任何想知道为什么我建议使用这种方法而不是交替动画的人来说，这种方法可以很好地与缓动函数协同作用。