[分享]css3动画箭头跳动

在现代网页设计中，CSS3 动画是一种不可或缺的功能，不仅可以使页面更加生动活泼，还可以增加用户体验。今天我们来看一种 CSS3 动画——箭头跳动。.arrow { : relative; displ...

在现代网页设计中，CSS3 动画是一种不可或缺的功能，不仅可以使页面更加生动活泼，还可以增加用户体验。今天我们来看一种 CSS3 动画——箭头跳动。

.arrow {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
}

.arrow:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: translateY(-50%) rotate(45deg);
  animation: arrow-jump 0.8s ease-in-out infinite;
}

@keyframes arrow-jump {
  0% {
    transform: translateY(-50%) rotate(45deg) translateX(0);
  }
  50% {
    transform: translateY(-50%) rotate(45deg) translateX(20px);
  }
  100% {
    transform: translateY(-50%) rotate(45deg) translateX(0);
  }
} 

首先，我们需要创建一个父元素，即箭头容器，这里用 div 元素，并设置宽高。然后，我们给箭头容器设置相对定位，这是为了让伪元素相对于它定位。接下来，在伪元素 :before 中，我们为箭头绘制样式，包括边框、位置和旋转。并添加了一个 animation 属性，用来指定箭头的跳动效果，`infinite` 表示无限循环。

最后，我们来看箭头跳动的动画代码。我们需要使用 @keyframes 规则，来定义箭头从哪里跳到哪里，跳多久。在这里，我们使用了 transform: translateY(-50%) rotate(45deg) translateX(0); 来指定箭头的位置和旋转，分别表示箭头距离容器顶部垂直居中，旋转 45 度，水平位置为 0。然后，在中间关键帧变换，让箭头往右侧跳动，最后回到原来位置。这样，我们就完成了箭头跳动的动画。

使用 CSS3 动画，可以为页面添加更多的乐趣和趣味性，提升用户体验。希望本篇文章可以对您有所帮助。