主体思路参考：
前端实现页面加载动画_边城仔的博客-CSDN博客
JS图片显示与隐藏案例_js控制图片显示隐藏-CSDN博客
1、编写load.css
/* 显示加载场景 */
.loadBackGround{
position: absolute;
top: 0px;
text-align: center;
width: 100%;
height: 100vh;
background-color: #efefef;
opacity: 0.6;
}
/* 加载动画 */
.load{
position: absolute;
top: 50vh;
width: 100px;
animation-name: loading;
animation-timing-function:linear;
animation-duration:1.5s;
animation-iteration-count:infinite;
}
@keyframes loading {
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}2、在html中引用
（1）需要在按钮和图片元素设置两个id
（2） 绑定id进行事件绑定
注意：图片一开始是 不显示的
style="display: none;
当点击按钮后才显示。
（3）编写js脚本
<script>
// 1. 获取元素
var btn = document.querySelector('#btn');
var img = document.querySelector('#new');
var index = 1;
// 2. 添加事件
btn.onclick = function() {
img.style.display = 'block';
}
</script>
完成。文章来源：https://www.toymoban.com/news/detail-723999.html
文章来源地址https://www.toymoban.com/news/detail-723999.html
到了这里，关于html设置前端加载动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
