箭头图标上下移动可以通过CSS的动画和JavaScript来实现。
示例代码如下: HTML:
<div class="arrow"></div>
CSS:
.arrow {
width: 20px;
height: 20px;
background: url(arrow.png) no-repeat;
position: relative;
animation: moveUpDown 2s infinite;
}
@keyframes moveUpDown {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
示例代码如下: HTML:
<div id="arrow"></div>
JavaScript:
var arrow = document.getElementById('arrow');
var position = 0;
var direction = 1;
function moveArrow() {
position += direction;
arrow.style.top = position + 'px';
if (position >= 20 || position <= 0) {
direction *= -1;
}
}
setInterval(moveArrow, 100);
以上是两种常见的实现箭头图标上下移动的方法,可以根据具体需求选择适合的方式来实现。
领取专属 10元无门槛券
手把手带您无忧上云