CSS实现最简洁的加载动画

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

CSS实现最简洁的加载动画相关推荐

CSS 3.0实现时光轴加载动画
给大家分享一个用CSS 3.0实现时光轴加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
[每天进步一点点~] uni-app css 实现 10种 loading加载动画效果
第一种效果图: 检测动画.gif 需要准备一张下面的底图,因为我写不出这种分成无数线段的圆... 加载loading底图.png 代码: <template><view class ...
css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码. 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯c ...
css 实现心形加载动画
文章目录前言一.html代码二.css 总结前言心形加载动画提示:以下是本篇文章的代码内容,供大家参考,相互学习一.html代码代码如下: <html><head&g ...
css动画----loading加载动画
今天做项目的时候,一个loading加载动画,让我搞了很长时间,后来ui给了看了一个loading加载源码,仿照着源码,把样式改了一下,成功了,并且通过ui给的链接,发现里面有很多优秀的源码可以借鉴, ...
css 加载动画如何生效,CSS 加载动画
CSS加载动画实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
CSS 实现加载动画之五-光盘旋转
今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...

CSS实现最简洁的加载动画

CSS实现最简洁的加载动画相关推荐

最新文章

热门文章