惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
G
Google Developers Blog
雷峰网
雷峰网
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
人人都是产品经理
人人都是产品经理
U
Unit 42
B
Blog RSS Feed
博客园 - 【当耐特】
T
Tailwind CSS Blog
V
V2EX
S
SegmentFault 最新的问题
美团技术团队
Apple Machine Learning Research
Apple Machine Learning Research
Y
Y Combinator Blog
M
MIT News - Artificial intelligence
量子位
aimingoo的专栏
aimingoo的专栏
Stack Overflow Blog
Stack Overflow Blog
Engineering at Meta
Engineering at Meta
GbyAI
GbyAI
P
Proofpoint News Feed
D
DataBreaches.Net
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
A
About on SuperTechFans

Hyde Blog

Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog
Hyde Blog
Hyde · 2025-10-05 · via Hyde Blog

配置首页箭头动画 ​

配置 ​

  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);
  }
}
  • 注释另一个箭头的伪元素

css

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