js实现一个带有跳动特效的加载动画

以下是一个使用JavaScript实现带有跳动特效的加载动画的示例代码：

html

#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
font-weight: bold;
animation: jump 1s infinite;
}

@keyframes jump {
0% { transform: translate(-50%, -50%) translateY(0); }
50% { transform: translate(-50%, -50%) translateY(-30px); }
100% { transform: translate(-50%, -50%) translateY(0); }
}

// 模拟加载延迟，显示加载动画
setTimeout(function() {
document.getElementById("loading").style.display = "none";
}, 3000);

在上述代码中，我们使用CSS的`@keyframes`规则定义了一个名为`jump`的动画，该动画从元素的正常位置开始，然后向上跳动30像素，并返回到正常位置，这个动画会一直循环播放，直到加载完成。

在JavaScript部分，我们使用了`setTimeout`函数模拟了一个加载延迟，当加载完成后，我们使用`getElementById`方法找到`loading`元素，将其`display`样式设置为`none`，从而隐藏加载动画。

你可以将上述代码复制到一个HTML文件中，并在浏览器中打开该文件，即可看到带有跳动特效的加载动画。