[分享]css做三个箭头动画

CSS中有许多有趣的特效和动画效果，今天我们来学习如何用CSS做三个不同样式的箭头动画效果。

.arrow {
  width: 0px;
  height: 0px;
  border-style: solid;
}

.arrow-down {
  border-width: 20px 20px 0px 20px;
  border-color: #007bff transparent transparent transparent;
  animation: arrow-down 1s linear infinite;
}

.arrow-right {
  border-width: 20px 0px 20px 20px;
  border-color: transparent transparent transparent #007bff;
  animation: arrow-right 1s linear infinite;
}

.arrow-left {
  border-width: 20px 20px 20px 0px;
  border-color: transparent #007bff transparent transparent;
  animation: arrow-left 1s linear infinite;
}

@keyframes arrow-down {
  0% { transform: translateY(0); }
  50% { transform: translateY(15px); }
  100% { transform: translateY(0); }
}

@keyframes arrow-right {
  0% { transform: translateX(0); }
  50% { transform: translateX(15px); }
  100% { transform: translateX(0); }
}

@keyframes arrow-left {
  0% { transform: translateX(0); }
  50% { transform: translateX(-15px); }
  100% { transform: translateX(0); }
} 

以上代码使用了箭头的基本形状和边框样式，加上一些动画效果以及颜色和大小的调节，实现了三种不同风格的箭头动画效果。

在调节动画效果时，我们使用了animation属性，指定了动画时间、动画曲线和动画次数等参数，并使用@keyframes关键字来定义动画的关键帧。

以上代码可以应用到箭头导航、动态展示等场景中。