[分享]css3怎么实现箭头动

CSS3的出现让我们在网页设计中可以做出更加丰富多彩的效果，比如实现箭头动画，非常的炫酷。下面我们来看看如何用CSS3实现箭头动画。.arrow { width: 0; height: 0; bord...

CSS3的出现让我们在网页设计中可以做出更加丰富多彩的效果，比如实现箭头动画，非常的炫酷。下面我们来看看如何用CSS3实现箭头动画。

.arrow {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #f00;
  animation: arrow 2s linear infinite;
}

@keyframes arrow {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
} 

上面的代码中，我们首先设置 .arrow 元素的宽度为 0，高度为 0，上下两个边框为透明，左边框为红色，就形成了一个三角形。接着我们使用动画属性 animation，将箭头变成了一个向右移动的动画。

在 @keyframes 中我们设置了起始状态和结束状态（即 0% 到 100% 的变化过程），使用 transform 来实现位移。最后设置动画执行时间为 2s，线性运动，无限循环。

是不是非常简单？我们简单的几行代码就做出了一个动态的箭头，让网页看起来更加生动活泼。