介绍
Vue 会动的箭头和首页同款
# 会动的箭头
- 跟首页的箭头一样会动的箭头效果 通常我们会把他作为点击跳转到下一页或指定距离的操作
# 动画原理和箭头样式
- 用到了
@keyframes
动画标签配合translateY
y轴平移 这里需要做回弹处理 也就是往下降 再回弹的这种原理
@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>