One

主题

One2025-03-04
317
1.5m
Get...

配置首页箭头动画 ​

image-20250303130505132

配置首页箭头动画 ​

2025年3月3日测试成功

版权 ​

次配置来源于《Hyde Blog》大佬贡献的代码，原文为《配置首页箭头动画》十分感谢。

image-20250303123901230

环境 ​

自己开源的 《vuepress-theme-vdoing-one-public》网站模板。

此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️

效果 ​

配置 ​

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

css
.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);
  }
}

（2）并在次文件里注释另一个箭头的伪元素

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

（3）运行测试效果

最近更新