2023 年为您的网站提供 30 个免费的 CSS 加载动画

野性酷女 2023-09-27 18:12 139阅读 0赞

我们将使用 Lottie 文件  
Lottie 文件 毫不费力地为网络、应用程序、社交和设计带来最小的、免费的、随时可用的动态图形。立即创建、编辑、测试、协作和发布 Lottie 动画！  
脚步  
1.在你的html中添加这个脚本

2.我们将提供一个JSON文件链接，应该放在src属性中

<lottie-player 
     src="Place json file link" 
     background="transparent"  
     speed="1"  
     style="width: 300px; height: 300px;"  
     loop  
     autoplay>
    </lottie-player>

如果你不想使用 Lottie Files 下载这些 Gif  
1.纸飞机  
![在这里插入图片描述][ee3df7ebcfbf4230b887cc13bc6f1e2c.gif]  
JSON文件

https://assets4.lottiefiles.com/packages/lf20_x62chJ.json

2.物料波浪加载  
![在这里插入图片描述][50d1ade3b7bc4d4c8be83cb7df57350f.gif]  
JSON文件

https://assets8.lottiefiles.com/datafiles/nT4vnUFY9yay7QI/data.json

3.加载动画蓝色  
![在这里插入图片描述][f5a64c89dc0242fe824e1112ed1cabbd.gif]  
JSON文件

https://assets6.lottiefiles.com/packages/lf20_usmfx6bp.json

4.加载  
![在这里插入图片描述][8f12af06f9c046eb97e86263491a70a7.gif]  
JSON文件

https://assets8.lottiefiles.com/datafiles/qm9uaAEoe13l3eQ/data.json

5.拖车装载

![在这里插入图片描述][9fb75eb272a54428b66dccc07b3472b5.gif]  
JSON文件

https://assets8.lottiefiles.com/datafiles/bNwYPnjv3OdFA5w/data.json

6.ServisHero加载

![在这里插入图片描述][2f5f948f59764f599b452047dc2f45ca.gif]

JSON文件

https://assets8.lottiefiles.com/datafiles/Hc0DflKIkYg1j3u/data.json

7.无限加载  
![在这里插入图片描述][83bde3efd83a4d22bd5f06bfd3e49149.gif]  
JSON文件

https://assets1.lottiefiles.com/datafiles/LZyeA614QaESwNk/data.json

8.发光加载  
![在这里插入图片描述][fb107a55e9be46f7a2b32cbb638bc513.gif]  
JSON文件

https://assets2.lottiefiles.com/datafiles/WKqC5QWz9GiZnlm/data.json

9.加载

![动图][7652188b17204d499636436c19799875.gif]  
JSON文件

https://assets2.lottiefiles.com/datafiles/ORpUnaV6z0mJ17E/data.json

10.加载  
![在这里插入图片描述][8d0fbcfb81eb468e965f5d3d12d7c4db.gif]

JSON文件

https://assets7.lottiefiles.com/datafiles/XpFCWApEzLI29va/data.json

11.装箱  
![在这里插入图片描述][2003b0fef07346049170b9b940532a03.gif]  
JSON文件

https://assets2.lottiefiles.com/packages/lf20_a2chheio.json

12.翻转盒加载

![动图][5eb8618db38c44ebbf9be7f8106fb6f4.gif]  
JSON文件

https://assets2.lottiefiles.com/packages/lf20_Z4BhGL.json

13.三角加载

![动图][41de5be8becd4e8684fe3e6d809efdc5.gif]  
JSON文件

https://assets2.lottiefiles.com/datafiles/DlRM2jtACyr4IX1u6l5rqtW1QWZKLCkNoBIXWeyH/loading.json

14.手指点击加载  
![在这里插入图片描述][9d6f025e66734a8f933be5299e0c9ac0.gif]  
JSON文件

https://assets2.lottiefiles.com/packages/lf20_szlepvdh.json

15.简单加载  
![在这里插入图片描述][55e7d3de51794f1b933fcdb1d6056278.gif]  
JSON文件

https://assets2.lottiefiles.com/datafiles/tvGrhGYaLS0VjreZ1oqQpeFYPn4xPO625FsUAsp8/simple loading/simple.json

16.装书

![动图][179ac2c25890433c9e24d5f5ee4518bd.gif]  
JSON文件

https://assets2.lottiefiles.com/datafiles/kdNSsX7MXeXXT1u/data.json

17.加载齿轮  
JSON文件

https://assets2.lottiefiles.com/datafiles/jQOi6i5dHOY4uP3/data.json

![在这里插入图片描述][79dd73d08dbe4259bba4a1be7465eb49.gif]  
18.加载成功微调器  
![在这里插入图片描述][14a6c2e3a8034ad191f31ec4d6ed709d.gif]  
JSON文件

https://assets2.lottiefiles.com/packages/lf20_knpXLX.json

19.加载动画  
![在这里插入图片描述][69eba3a37c9042d6aab26f6fff4cc3b9.gif]  
JSON文件

https://assets2.lottiefiles.com/datafiles/kaSuzs8QVBUsk3j/data.json

20.装书

![在这里插入图片描述][33200c59531543a3b8ae83705fbbc8ca.gif]  
JSON文件

https://assets5.lottiefiles.com/packages/lf20_DMgKk1.json

21.加载模式  
![在这里插入图片描述][a9119a518e004e659ca126ed77a3599a.gif]  
JSON文件

https://assets3.lottiefiles.com/packages/lf20_TEPYi7OqQu.json

22.加载!  
![在这里插入图片描述][421fab6f8dba43b3b54e969d7ac72ac3.gif]

JSON文件

https://assets2.lottiefiles.com/packages/lf20_pMMQPe.json

23液体负载胺依达拉替普

![动图][0fdfcff72e2c473693ba911860240b8a.gif]  
JSON文件

https://assets2.lottiefiles.com/packages/lf20_qg4cSS.json

24.流体加载动画  
![在这里插入图片描述][3e3ddb3b61b24247902095b5d98d4942.gif]

JSON文件

https://assets2.lottiefiles.com/datafiles/iTvqbURmiPR4l5L/data.json

25.加载

![动图][0e3dd999ff1a4e6498c5d2b108bb5af7.gif]  
JSON文件

https://assets2.lottiefiles.com/temp/lf20_jIG9zu.json

26.加载 Bloob

![动图][8a32705fc302492eae5fe0b200977e34.gif]

JSON文件

https://assets2.lottiefiles.com/packages/lf20_rPGSco.json

27.加载

![动图][d4f91d9634974968b925c277af40be5f.gif]  
JSON文件

https://assets2.lottiefiles.com/datafiles/kn5W819UTw4eDwEBTOscVxDtsBaRzRSLnlqWen3o/Loading/data.json

1.  HMS装载

![动图][9b5a3cf97a014ff998b7a05943db98a8.gif]  
JSON文件

https://assets2.lottiefiles.com/packages/lf20_t9gkkhz4.json

1.  StreetBy 加载  
    ![在这里插入图片描述][b67db866853d4424850433173abd949e.gif]

JSON文件

https://assets2.lottiefiles.com/datafiles/afw92jL6nC0SZCb/data.json

1.  3D旋转加载动画  
    ![在这里插入图片描述][baa9bc68ef2f423ba7fc05ca980440ec.gif]  
    JSON文件

https://assets2.lottiefiles.com/datafiles/wFjFleaESNWBzrV/data.json

制作不容易，喜欢的记得评论点赞分享。制作时间5/3 凌晨2点01分，困了睡觉。

[ee3df7ebcfbf4230b887cc13bc6f1e2c.gif]: https://img-blog.csdnimg.cn/ee3df7ebcfbf4230b887cc13bc6f1e2c.gif
[50d1ade3b7bc4d4c8be83cb7df57350f.gif]: https://img-blog.csdnimg.cn/50d1ade3b7bc4d4c8be83cb7df57350f.gif
[f5a64c89dc0242fe824e1112ed1cabbd.gif]: https://img-blog.csdnimg.cn/f5a64c89dc0242fe824e1112ed1cabbd.gif
[8f12af06f9c046eb97e86263491a70a7.gif]: https://img-blog.csdnimg.cn/8f12af06f9c046eb97e86263491a70a7.gif
[9fb75eb272a54428b66dccc07b3472b5.gif]: https://img-blog.csdnimg.cn/9fb75eb272a54428b66dccc07b3472b5.gif
[2f5f948f59764f599b452047dc2f45ca.gif]: https://img-blog.csdnimg.cn/2f5f948f59764f599b452047dc2f45ca.gif
[83bde3efd83a4d22bd5f06bfd3e49149.gif]: https://img-blog.csdnimg.cn/83bde3efd83a4d22bd5f06bfd3e49149.gif
[fb107a55e9be46f7a2b32cbb638bc513.gif]: https://img-blog.csdnimg.cn/fb107a55e9be46f7a2b32cbb638bc513.gif
[7652188b17204d499636436c19799875.gif]: https://img-blog.csdnimg.cn/7652188b17204d499636436c19799875.gif
[8d0fbcfb81eb468e965f5d3d12d7c4db.gif]: https://img-blog.csdnimg.cn/8d0fbcfb81eb468e965f5d3d12d7c4db.gif
[2003b0fef07346049170b9b940532a03.gif]: https://img-blog.csdnimg.cn/2003b0fef07346049170b9b940532a03.gif
[5eb8618db38c44ebbf9be7f8106fb6f4.gif]: https://img-blog.csdnimg.cn/5eb8618db38c44ebbf9be7f8106fb6f4.gif
[41de5be8becd4e8684fe3e6d809efdc5.gif]: https://img-blog.csdnimg.cn/41de5be8becd4e8684fe3e6d809efdc5.gif
[9d6f025e66734a8f933be5299e0c9ac0.gif]: https://img-blog.csdnimg.cn/9d6f025e66734a8f933be5299e0c9ac0.gif
[55e7d3de51794f1b933fcdb1d6056278.gif]: https://img-blog.csdnimg.cn/55e7d3de51794f1b933fcdb1d6056278.gif
[179ac2c25890433c9e24d5f5ee4518bd.gif]: https://img-blog.csdnimg.cn/179ac2c25890433c9e24d5f5ee4518bd.gif
[79dd73d08dbe4259bba4a1be7465eb49.gif]: https://img-blog.csdnimg.cn/79dd73d08dbe4259bba4a1be7465eb49.gif
[14a6c2e3a8034ad191f31ec4d6ed709d.gif]: https://img-blog.csdnimg.cn/14a6c2e3a8034ad191f31ec4d6ed709d.gif
[69eba3a37c9042d6aab26f6fff4cc3b9.gif]: https://img-blog.csdnimg.cn/69eba3a37c9042d6aab26f6fff4cc3b9.gif
[33200c59531543a3b8ae83705fbbc8ca.gif]: https://img-blog.csdnimg.cn/33200c59531543a3b8ae83705fbbc8ca.gif
[a9119a518e004e659ca126ed77a3599a.gif]: https://img-blog.csdnimg.cn/a9119a518e004e659ca126ed77a3599a.gif
[421fab6f8dba43b3b54e969d7ac72ac3.gif]: https://img-blog.csdnimg.cn/421fab6f8dba43b3b54e969d7ac72ac3.gif
[0fdfcff72e2c473693ba911860240b8a.gif]: https://img-blog.csdnimg.cn/0fdfcff72e2c473693ba911860240b8a.gif
[3e3ddb3b61b24247902095b5d98d4942.gif]: https://img-blog.csdnimg.cn/3e3ddb3b61b24247902095b5d98d4942.gif
[0e3dd999ff1a4e6498c5d2b108bb5af7.gif]: https://img-blog.csdnimg.cn/0e3dd999ff1a4e6498c5d2b108bb5af7.gif
[8a32705fc302492eae5fe0b200977e34.gif]: https://img-blog.csdnimg.cn/8a32705fc302492eae5fe0b200977e34.gif
[d4f91d9634974968b925c277af40be5f.gif]: https://img-blog.csdnimg.cn/d4f91d9634974968b925c277af40be5f.gif
[9b5a3cf97a014ff998b7a05943db98a8.gif]: https://img-blog.csdnimg.cn/9b5a3cf97a014ff998b7a05943db98a8.gif
[b67db866853d4424850433173abd949e.gif]: https://img-blog.csdnimg.cn/b67db866853d4424850433173abd949e.gif
[baa9bc68ef2f423ba7fc05ca980440ec.gif]: https://img-blog.csdnimg.cn/baa9bc68ef2f423ba7fc05ca980440ec.gif