css arrow 动画

在网页设计中，箭头是一种经常用到的元素，它可以指示方向或者引导用户点击。当我们需要给网页中的箭头添加一些动画效果时，CSS的伪元素就能帮我们实现这个需求。 使用CSS的伪元素before和after可以给元素添加一个看似“出现在元素中”的效果，我们可以利用这个特性以及一些CSS3的属性，让箭头动起来。

.arrow {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid #ccc;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transition: all 0.5s ease-out;
}

.arrow::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #ccc #ccc;
  transform: rotate(45deg);
  transition: all 0.5s ease-out;
}

.arrow:hover,.arrow:focus {
  transform: translateX(20px);
}

.arrow:hover::before,.arrow:focus::before {
  width: 20px;
  height: 20px;
  top: -20px;
  right: -20px;
}

这个示例代码中的箭头元素是一个带斜边框的div块，我们使用before伪元素来添加一个斜向右下角的小三角形，通过给before设置边框颜色和样式模拟出箭头的形状，并通过rotate属性让箭头旋转45度。 在:hover和:focus状态下，通过translateX属性让元素向右移动一定距离，同时before伪元素的宽度、高度和top、right属性也进行了动态变化，达到了箭头出现和消失的动画效果。 通过使用CSS的伪元素和过渡动画，我们可以轻松实现简单的箭头动画效果，为网页增加一些趣味性，同时也让用户体验更加优雅。