用CSS制作心脏搏动

Question

我用CSS做了一个心.我只是想找到一种方法让它击败/搏动.

这是代码(小提琴):

#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 - 你可能对动画很感兴趣:

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);
    }
}

关于JSFiddle的工作示例.

把你可爱的心包裹起来#heart-container,你很高兴.此外,请不要忘记在必要时包含供应商特定的前缀.

仅供参考,速度animation属性 - 类似于transition- 也接受缓动设置(时序功能),如ease-in-out.或者,使用animation-timing-function.

请参阅JSFiddle上的动画缓动示例.

注意

对于任何想知道为什么我建议这种方法而不是交替动画的人来说,这种方法很好地协调了缓和功能.