首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS实现最简洁的加载动画

CSS实现最简洁的加载动画

作者头像
Jean
发布2021-12-11 10:36:27
1.1K0
发布2021-12-11 10:36:27
举报
文章被收录于专栏:Web行业观察Web行业观察

纯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就能轻松实现,何必去使用那么大的第三方库呢?

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-12-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebHub 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档