[分享]css3悬浮爱心动画特效

CSS3悬浮爱心动画特效可以通过CSS3的transition实现，非常简单易懂。下面我们来详细介绍一下这个特效的实现过程。

 .heart {
    background-color:#FF2D55;
    width: 30px;
    height: 30px;
    position:relative;
    animation: beat 1s infinite;
  }
  .heart::before,
  .heart::after {
    content: "";
    background-color:#FF2D55;
    border-radius: 15px 15px 0 0;
    position:absolute;
  }
  .heart::before {
    width: 30px;
    height: 30px;
    top: -15px;
    left: 0;
  }
  .heart::after {
    top: 0;
    left: 15px;
    width: 30px;
    height: 30px;
  }
  .heart:hover {
    cursor: pointer;
    transform: translateY(-10px) scale(1.2);
  }
  @keyframes beat {
    0% { transform: scale(0.75); }
    20% { transform: scale(1); }
    40% { transform: scale(0.75); }
    60% { transform: scale(1); }
    80% { transform: scale(0.75); }
    100% { transform: scale(0.75); }
  } 

以上代码先定义了一个.heart类，表示红色爱心，设置了其宽度和高度，以此来定义一个最小尺寸的爱心。同时也定义了伪元素:before和:after，用来做出爱心的3D立体效果。

其中:before设置在中间的上方，:after设置在靠右边的中间。另外还有一个关键的点，即设置了一个心跳的动画，实现爱心的随机跳动，增加了页面的生动性。

最后，把:hover设置为爱心悬浮时的效果，改变其位置和缩放比例，即可完成这个爱心动画特效。