[分享]css3动画心形

CSS3动画是网页设计中非常重要的元素之一，可以为页面带来生动而富有趣味性的效果。其中，心形动画是一种非常经典和常见的动画效果。/ 心形动画css样式 / .heart { : relative; w...

CSS3动画是网页设计中非常重要的元素之一，可以为页面带来生动而富有趣味性的效果。其中，心形动画是一种非常经典和常见的动画效果。

/* 心形动画css样式 */
.heart {
  position: relative;
  width: 100px;
  height: 90px;
  transform: rotate(-45deg);
}


.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #fc2e51;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
} 

上面是心形动画的CSS样式代码，其中`.heart`为背景层的样式，`.heart:before`和`.heart:after`为红色层和白色层的样式。通过设置不同的位置和角度属性，实现心形效果。

但是，单纯的样式并不能体现出动画效果，我们还需要为其添加一些动画属性，并实现动画的循环以及速度控制。下面是完整的心形动画代码：

/* 完整的心形动画代码 */
.heart {
  position: relative;
  width: 100px;
  height: 90px;
  transform: rotate(-45deg);
  animation: heartbeat 1s infinite ease-in-out;
}

.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #fc2e51;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  animation: heartbeat 1s infinite ease-in-out;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
  animation: heartbeat 1s infinite ease-in-out 0.5s;
}

@keyframes heartbeat {
  from {
    transform: scale(1) rotate(-45deg);
  }

  to {
    transform: scale(0.6) rotate(-45deg);
  }
} 

上面的代码中，通过添加`animation`属性实现了动画效果，并设置了循环、速度等参数。同时，还定义了心形动画的具体实现方式，使用了`@keyframes`属性指定动画变化的关键帧。

通过以上的代码实现，我们可以在网页中添加生动有趣的心形动画效果，并且可以通过调整代码实现更加多样化的效果，为网页设计注入更多的创意和活力。