您现在的位置是:首页 > Javascript
当前栏目
CSS实现最简洁的加载动画
2023-04-18 14:41:17 时间
纯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就能轻松实现,何必去使用那么大的第三方库呢?
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营