css一箭穿心的动画

CSS中有很多令人惊叹的动画，其中最为流行和令人印象深刻的应该是一箭穿心的动画。这种动画可以让网页更加生动和有趣，吸引用户的目光。

.arrow {
  position: relative;
  width: 100px;
  height: 100px;
}

.arrow:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 70px;
  background: #f00;
  border-radius: 5px;
  animation: arrow-ani 1s ease-in-out infinite alternate;
}

.arrow:after {
  content: "";
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
  animation: arrow-ani 1s ease-in-out infinite alternate;
}

@keyframes arrow-ani {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
  }
} 

上述代码是一箭穿心动画的基本CSS。将其应用到一个带有类名为arrow的元素上，就可以实现这一动画效果。通过:before和:after选中伪元素，用translateX(-50%)属性让它们居中，再用动画效果实现箭矢的运动。

在这个动画的基础上，你可以进行更多的改变，增加箭矢旋转、心形运动等效果，创造出更加美妙的视觉效果。

CSS中一箭穿心的动画不仅仅是一种视觉效果，更是CSS技巧的一种展示方式。希望本文能够为CSS动效的爱好者提供帮助和灵感。