Vue2 会动的箭头

介绍

Vue 会动的箭头和首页同款

会动的箭头

• 跟首页的箭头一样会动的箭头效果 通常我们会把他作为点击跳转到下一页或指定距离的操作

动画原理和箭头样式

• 用到了@keyframes动画标签配合translateYy轴平移 这里需要做回弹处理 也就是往下降 再回弹的这种原理

@keyframes bounce-in {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}

• 箭头样式很简单border都知道可以画三角 通过这个原理 配合transform就可实现小箭头的样式
  • 小知识: transform不适用于inline元素 需要给盒子设置display: block;和display: inline-block
  • 注意: transform 如果你分开写 会被覆盖 你想同时应用多个需要中间加个空格分开 transform:rotate(45deg) translate(500px,0); 这样来写
  • 建议: 建议整个svg或者矢量图作为箭头比较好一点 用border画的箭头不是很友好

.arrowSS_style {
  display: block;
  margin: 0 auto;
  width: 25px;
  height: 25px;
  border-right: 3px solid #6ba6c0;
  border-top: 3px solid #6ba6c0;
  -webkit-transform: rotate(135deg); /* 箭头方向可以自由切换角度 */
  transform: rotate(135deg);
  cursor: pointer;
}

实现代码

• 注意: 一定要给包裹箭头效果的盒子动画 否则子盒子的箭头平移transform: rotate(135deg)将会失效

   <!-- 底部跳转 -->
<div class="arrowSS">
    <a href="#anchorSS" class="arrowSS_style"></a>
</div>

<style>
    /* 包裹箭头效果的盒子 */
    .arrowSS {
      animation: bounce-inSS 2s infinite; /* 启动动画特效 */
    }

    /* 箭头效果的盒子 */
    .arrowSS_style {
      display: block;
      margin: 0 auto;
      width: 25px;
      height: 25px;
      border-right: 3px solid #6ba6c0;
      border-top: 3px solid #6ba6c0;
      -webkit-transform: rotate(135deg); /* 箭头方向可以自由切换角度 */
      transform: rotate(135deg);
      cursor: pointer;
    }
    /* 箭头动画 */
    @keyframes bounce-inSS {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }

      40% {
        transform: translateY(-30px);
      }

      60% {
        transform: translateY(-15px);
      }
    }
</style>