108种超轻量的加载动画
2023-02-18 16:38:51 时间
大家好,我是前端实验室的大师兄!
今天大师兄要分享的不是 Animate.js,也不是 Move.js,而是能提供108种加载动画的库:Whirl
.
最省力的加载动画
话不多说,直接来看例子。
以上只是冰山一角。whirl的CSS加载动画集合中有108种选项供你挑选。选中喜欢的动画后,点击“Grab the CSS on Github!”。
将跳转到Github页面,直接获取 CSS 样式,拷贝到自己的样式文件中使用即可。
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
/**
* Ring of stars
*
* @author jh3y
*/
.ring-of-stars {
-webkit-animation: spin 1.25s infinite linear;
animation: spin 1.25s infinite linear;
height: 50px;
position: relative;
width: 50px; }
.ring-of-stars div {
border-bottom: 9.6px solid var(--primary);
border-left: 3.2px solid transparent;
border-right: 3.2px solid transparent;
height: 0;
position: relative;
width: 0;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform-origin: center 9.6px;
transform-origin: center 9.6px; }
.ring-of-stars div:after, .ring-of-stars div:before {
border-bottom: 6.4px solid var(--primary);
border-left: 9.6px solid transparent;
border-right: 9.6px solid transparent;
content: '';
display: block;
height: 0;
position: absolute;
width: 0; }
.ring-of-stars div:after {
-webkit-transform: translate(-9.6px, 6.4px) rotate(-35deg);
transform: translate(-9.6px, 6.4px) rotate(-35deg); }
.ring-of-stars div:before {
-webkit-transform: translate(-9.6px, 6.4px) rotate(35deg);
transform: translate(-9.6px, 6.4px) rotate(35deg); }
.ring-of-stars div:nth-child(1) {
-webkit-transform: translate(-50%, -9.6px) rotate(51.42857deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(51.42857deg) translate(0, 400%); }
.ring-of-stars div:nth-child(2) {
-webkit-transform: translate(-50%, -9.6px) rotate(102.85714deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(102.85714deg) translate(0, 400%); }
.ring-of-stars div:nth-child(3) {
-webkit-transform: translate(-50%, -9.6px) rotate(154.28571deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(154.28571deg) translate(0, 400%); }
.ring-of-stars div:nth-child(4) {
-webkit-transform: translate(-50%, -9.6px) rotate(205.71429deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(205.71429deg) translate(0, 400%); }
.ring-of-stars div:nth-child(5) {
-webkit-transform: translate(-50%, -9.6px) rotate(257.14286deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(257.14286deg) translate(0, 400%); }
.ring-of-stars div:nth-child(6) {
-webkit-transform: translate(-50%, -9.6px) rotate(308.57143deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(308.57143deg) translate(0, 400%); }
.ring-of-stars div:nth-child(7) {
-webkit-transform: translate(-50%, -9.6px) rotate(360deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(360deg) translate(0, 400%); }
重点注意
大家看到上面的例子中,css样式文件占了很大篇幅了。有小伙伴会问:有没有该CSS的发行版本呢?
答案是:没有
。
应为程序的引用越精炼,效率越高。如果为了使用一个加载动画,就去引入一整个文件,有点得不偿失。
还有就是考虑:更方便的修改
。
前例中的加载效果其实没有占用多少样式
,占用篇幅最多的是五角星这个形状和各自的定位。如果你把五角星改为圆点那就简单多了。
这款加载动画的小工具,可以直接使用,也可以以此为模板,从中获取灵感,改变和做你想做的事情?
加载动画108款,谁是你中意的款呢?赶紧去看看吧!
官网地址 https://whirl.netlify.app/
相关文章
- RubyMine 2022 for Mac(强大的Rails/Ruby开发工具)v2022.3.1中文激活版
- Mac PS CC2018软件安装教程—PS全版本软件下载地址(包括最新的2023)
- 占道摆摊经营监控报警系统
- 校园打架行为识别检测系统
- 河道水文标尺监测系统
- Adobe Photoshop PS 2022软件安装包免费下载以及安装教程
- Photoshop PS 2021软件安装教程 PS全版本软件下载地址(包括最新的2023)
- 获取QQ头像
- 腾讯云服务器优化
- 服务出错排错方法(持续更新)
- 路由器屏蔽小米电视的域名
- 一个ss的安装脚本
- 使用docker运行redmine
- Centos7 虚拟机配置
- Windows10,Windows7复原音量合成器
- 一句话命令
- 树莓派安装记录-usb/samba/aria2/xware/apt-get
- Laravel的容器的工作原理
- Cron在Centos上的安装方法
- Dropbox新姿势备份服务器数据