純CSS能實現的功能越來越多了，能用css實現的就別用js，今天教大家用最短的代碼實現下面這個加載動畫，這個加載動畫的優勢不僅是短小，而且不需要額外的dom元素就可實現，因此在那些異步加載的dom身上使用非常方便，比如<img>、<video>、<canvas>等，實現了【樣式-結構-數據】的分離，大大提升了開發和運行的效率。

如圖，我們要在任何一個dom元素的背景上播放這樣的橫條，首先想到的是利用repeating-linear-gradient()重復線性漸變函數（漸變函數常常被用來做突變圖），然后設置背景圖的尺寸和位置，禁用Y方向上的瓦片重復，但啟用X方向上的重復，因為隱藏掉X重復，我們的小矩形是這樣運動的：

只要調整合適的時間間隔，往復循環，就可以無縫地首尾銜接，營造出連續的運動效果，這里我特地讓條紋與水平線呈30°夾角，因為這樣的直角三角形中，斜邊正好是短邊的2倍，易于計算，其中短邊就是一對條紋的厚度，斜邊則是小矩形的寬度，同時還要將單條紋的厚度作為可變量w，那么黑白雙條紋的厚度就是2w，小矩形的寬度和運動距離就是是4w，雖然用CSS實現更簡單，但是為了控制動畫的生命周期，統一用JS來做吧：

//?條紋厚度 const w = 3; //?加載動畫的容器 const?loading?=?document.getElementById('loading'); const background =`center / ${w * 4}mm 1cm repeat no-repeat ` +`repeating-linear-gradient(-30deg, white 0, white ${w}mm, black ${w}mm, black ${w * 2}mm)`; //?開始動畫 const animation = loading.animate([{ backgroundPositionX: "0", background },{ backgroundPositionX: w * 4 + "mm", background },],{//?周期duration: 500,iterations: Infinity,} ); //?結束動畫 animation.cancel();

而且，可以根據原型圖的要求調整樣式，無論如何也不會超過20行CSS就能輕松實現，何必去使用那么大的第三方庫呢？

總結

以上是生活随笔為你收集整理的CSS实现最简洁的加载动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。