svg实现闪烁的点_Loading动画的最佳实现方式

点击上方 "程序员小乐"关注, 星标或置顶一起成长

每天凌晨00点00分, 第一时间与你相约

每日英文

Maturity not to see how old you, but your shoulders strong enough to see multiple responsibilities.

成熟不是看你的年龄有多大&＃xff0c;而是看你的肩膀能挑起多重的责任。

每日掏心话

每个人的性格中&＃xff0c;都有某些无法让人接受的部分&＃xff0c;再美好的人也一样。所以不要苛求别人&＃xff0c;也不要埋怨自己。

来自&＃xff1a;一只有趣的程序猿 | 责编&＃xff1a;乐乐

链接&＃xff1a;jianshu.com/p/593e1480ecaa

程序员小乐(ID:study_tech)第 749 次推文 图片来自 Pexels

往日回顾&＃xff1a;万字长文&＃xff01;Unix 和 Linux 你不知道的那些历史(详解版)

正文

Loading动画是一个项目中必不可少的部分&＃xff0c;一个好的Loading动画不仅可以让UI界面更加友好&＃xff0c;更可以缓解用户等待加载的焦虑情绪&＃xff0c;从而提升用户体验。

目前对于前端而言&＃xff0c;实现loading动画的方法大致有几种&＃xff1a;

• 直接插入GIF图片

• CSS制作loading动画

• SVG格式的loading动画

在我过往的项目经历中&＃xff0c;这几种方法我都使用过&＃xff0c;但是各有利弊。

GIF图片直接插入无疑是最简单的&＃xff0c;但是不免出现图片占用空间大&＃xff0c;替换成本高&＃xff0c;网络慢的时候出现loading动画延迟加载的情况&＃xff0c;大大降低用户的体验&＃xff1b;CSS制作的动画设计空间比较大&＃xff0c;前端工作&＃xff0c;因为是CSS代码实现&＃xff0c;所以占用空间不大&＃xff0c;而且流畅度以及体验都很好&＃xff1b;SVG在绘制路径上非常灵活&＃xff0c;实现动画十分容易&＃xff0c;用来做loading动画反而有点大材小用了。

在平时的项目中&＃xff0c;我更倾向于使用最后一种方法。个人认为是最佳的实现方法&＃xff0c;以下为大家分享前端制作一个简单的loading动画并使用的方法。

1. 寻找素材

推荐 loading.io 这个网站可以高度定制你的loading&＃xff0c;包括搭配的颜色、大小、速度等。

loading.io

2. 导出成Base64格式

找到你喜欢的动画并调整到合适的样式后。紧接着需要导出成svg格式&＃xff0c;这里注意&＃xff0c;因为部分的loading动画需要收费&＃xff0c;要知道&＃xff01;我们是做前端的(滑稽)&＃xff0c;这是你需要&＃xff1a;

1.打开控制台点击选择标签
2.选择点击你调整好的动画
3.将SVG标签整个复制下来
4.新建空的.svg文件并将复制下来的SVG粘贴进去
5.打开 在线转换Base64 将.svg文件转换成 Base64编码 sojson.com/image2base64.html

复制SVG标签

3. 在你的网页上使用动画

有两种使用方式&＃xff0c;一种是css方式&＃xff1b;一种是直接img标签引用。

.box{
background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}

成品见下图

最终效果

欢迎在留言区留下你的观点&＃xff0c;一起讨论提高。如果今天的文章让你有新的启发&＃xff0c;学习能力的提升上有新的认识&＃xff0c;欢迎转发分享给更多人。

猜你还想看

阿里、腾讯、百度、华为、京东最新面试题汇集

前后端分离开发&＃xff0c;六大方案全揭秘&＃xff1a;HTTP API 认证授权术

浓缩就是精华&＃xff01;106页的《Python进阶》中文版(附下载)

终于明白为什么要加 final 关键字了&＃xff01;

关注「程序员小乐」&＃xff0c;收看更多精彩内容
嘿&＃xff0c;你在看吗&＃xff1f;