主體思路參考：
前端實現(xiàn)頁面加載動畫_邊城仔的博客-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）需要在按鈕和圖片元素設(shè)置兩個id
?
（2） 綁定id進行事件綁定
注意：圖片一開始是?不顯示的
style="display: none;
當(dāng)點擊按鈕后才顯示。
（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>
完成。文章來源：http://www.zghlxwxcb.cn/news/detail-723999.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-723999.html
到了這里，關(guān)于html設(shè)置前端加載動畫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
