整體程式碼
HTML 實現自定義載入動畫，話不多說如下程式碼所示：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html自定義載入動畫</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.loading{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
animation: loading 2s linear infinite;
} .loading img{
width: 100px;
height: 100px;
}
@keyframes loading {
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
</style>
</head> <body>
<div class="loading">
<!-- 我是自定義載入動畫 -->
<img src="./images/loading.png" alt="">
</div>
</body> </html>
程式碼解釋
html,body{
margin: 0;
padding: 0;
}
如上，去掉瀏覽器給頁面設定的預設邊距
.loading{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
animation: loading 2s linear infinite;
}
給 class 為 loading 的標籤居中顯示和動畫。
.loading img{
width: 100px;
height: 100px;
}
調整 loading 下圖片的大小。
@keyframes loading {
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
設定名稱為 loading 的動畫，動畫從 0° ~ 360°，轉一圈。
後記
在程式設計當中，任何你看上去酷炫或者高大上的效果都是基礎的東西實現的。我們老師也經常給學員強調，基礎一定要打好，不要去盲目的追求高大上的寫法。有些人，基礎都沒有學完就著急去學框架的內容，框架固然重要，但是基礎的東西你沒有學完，就註定了你沒有發展前景。如果那一天 VUE、React 和 Angular 這些框架被新出來的框架淘汰了，那麼你又要花很長時間去學習新的框架。這樣的人才不是企業所需要的，可替代性太強，隨便花一兩個月就能教出一個會使用框架的人。但是若是你基礎知識紮實，那麼就能很平滑的對接任何框架，所花的學習成本也會很低，基本都能夠快速上手。
其實多年開發經驗的老鳥們都明白，程式設計到最後不是說你會多少框架，而是你對基礎知識的理解和運用的程度。老鳥們都明白，最基礎的東西最難。就跟金庸武俠中描述的那樣，往往高手的最高境界是返璞歸真，不會去追求招式的華麗，也不會追求厲害的武器。我們學這些技能的目的是什麼？實現效果，解決問題。直達問題本質，實現一招制敵，這才是我們應該追求的。