配置首页箭头动画

配置

1. 在 docs\.vuepress\components\IndexBigImg.vue 路径添加以下代码

.banner-arrow::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-right: 4px solid #fff;
  border-top: 4px solid #fff;
  /* transform: rotate(135deg); */
  position: absolute;
  bottom: -54px;
  animation: arrow-shake-70d9180a 1.5s ease-out infinite;
}

/* 箭头动画 */
@keyframes arrow-shake-70d9180a {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(135deg);
  }

  30% {
    opacity: 0.5;
    transform: translateY(25px) rotate(135deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(135deg);
  }
}

• 注释另一个箭头的伪元素

/* .banner-arrow::after {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: rotate(135deg);
} */