Question

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

以下是代码（fiddle）：

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

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。

注意

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

Answer 2

animation属性是你的朋友。：）

#heart {
    position: relative;
    width: 100px;
    height: 90px;

    -webkit-animation: heartbeat .8s ease-in-out 0s infinite;
    -moz-animation: heartbeat .8s ease-in-out 0s infinite;
    animation: heartbeat .8s ease-in-out 0s infinite;
    transform: scale(1);
}

@-moz-keyframes heartbeat {
    0%   {transform: scale(1);}
    50%  {transform: scale(1.5);}
    100% {transform: scale(1);}
}
@-webkit-keyframes heartbeat {
    0%   {transform: scale(1);}
    50%  {transform: scale(1.5);}
    100% {transform: scale(1);}
}
@keyframes heartbeat {
    0%   {transform: scale(1);}
    50%  {transform: scale(1.5);}
    100% {transform: scale(1);}
}


#heart:before,
#heart:after {
    position: absolute;
    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 3

使用超棒的字体，JQuery和CSS动画创建跳动的心脏图标。

@keyframes heartbeat
    {
      0%
      {
        transform: scale( .75 );
      }
      20%
      {
        transform: scale( 1 );
      }
      40%
      {
        transform: scale( .75 );
      }
       60%
      {
        transform: scale( 1 );
      }
        80%
      {
        transform: scale(.75);
      }
       100%
      {
        transform: scale( 1 );
      }
    }

create beating heart

用CSS制作心脏搏动

3 个答案: