只用一个div来构建你的CSS Loading - The Dots 2021-10-29 默认分类 暂无评论 4310 次阅读 ![2vhnxjmn7qgmeecr23xp.gif][1] 是的,又是一篇关于CSS Loading的文章,但这一次你将构建Loading在这篇文章中,我将与你分享一些我用来构建一些Loading的技巧。 好吧,又是一个无聊的教程,我们将有大量的代码,复杂的@keyframes和疯狂的动画延迟,对吗? **不全是**。在本教程中,你将拥有。 ✔️ 一个div ✔️一个@keyframes ✔️没有延迟,没有复杂的时间计算 ✔️我们不会做一个动画,而是使用相同的代码结构做许多动画。 不枯燥,因为这篇文章在你还没来得及眨眼时就会结束。 ---------- **1) 建立圆点** ----------- 我们首先使用以下代码创建一个点([演示链接][3])。 ``` .dot { background:radial-gradient(farthest-side,currentColor 90%,red); background-size:30px 30px; background-position:top center; background-repeat:no-repeat; } ``` 其逻辑很简单。我创建了一个大小为30x30的背景层,放在顶部的中心位置,我禁止重复,只有一个实例。该层是一个有两种颜色的径向梯度(),currentColor是你在颜色属性中定义的颜色(对以后更新点的颜色很有用)和一个透明的颜色(我在这里使用红色来清楚地看到梯度层的限制)。 farthest-side允许我考虑最远的一边作为我的百分比参考,因为我们处理的是一个正方形的渐变(30x30),所有的边都是最远的一边,所以通过使用currentColor 100%,我画了一个接触边的圆。 但你使用的是90%,而不是100%!这是真的。 是的,这是因为渐变不是抗锯齿的,所以我们必须考虑一个较小的值来获得一个平滑的边缘。 下面是90%和100%的区别 ![7hqht9ipb930t5002aa4.png][4] 这就是全部! 现在,我们有了我们的点,让我们把它做成动画。 ---------- **2) 使点成为动画** ------------- 为了使点成为动画,我们简单地使背景位置成为动画。让我们创建一个@keyframes来更新从顶部中心到底部中心的位置。 我们的代码将变成([演示链接][5])。 ``` .dot { background:radial-gradient(farthest-side,currentColor 90%,#0000); background-size:30px 30px; background-position:top center; background-repeat:no-repeat; animation:m 1s infinite alternate; } @keyframes m{ to {background-position:bottom center} } ``` 我想上面的内容是不言自明的 我们也可以像下面这样转换代码。这将使接下来的步骤更加容易。 ``` .dot { background:radial-gradient(farthest-side,currentColor 90%,#0000); background-size:30px 30px; background-repeat:no-repeat; animation:m 1s infinite alternate; } @keyframes m{ 0% {background-position:top center} 100% {background-position:bottom center} } ``` 现在你可以给一个点做动画了。你所要做的就是把位置更新为你想要的样子。 对于任何不熟悉背景位置的人,我强烈建议阅读我以前的文章,更确切地说,是关于百分比值的部分。 以后,我将考虑百分比值,而不是像顶部中心这样的关键词(相当于50% 0)。在我之前的文章中,我给出了所有的等价物。 ---------- **3) 添加更多的点** ------------- 要添加更多的点,我们只需添加更多的div,并将其放在彼此的旁边。然后每一个将有一个背景层和它自己的@keyframes动画等 ***当然,不!*** ----- 要添加更多的点,我们只需添加更多的背景层。我们可以有任意多的图层,所以一个div可以容纳很多的点。 让我们用2个来试试([演示链接][6])。 ``` .dot { background: radial-gradient(farthest-side,currentColor 90%,#0000), radial-gradient(farthest-side,currentColor 90%,#0000); background-size:30px 30px; background-repeat:no-repeat; animation:m 1s infinite alternate; } @keyframes m{ 0% {background-position:top left,bottom right} 100%{background-position:bottom left,top right} } ``` 一个点将从左上角到左下角的动画,另一个从右下角到右上角的动画。就这么简单! 注意,我只保留了一个背景尺寸,因为我所有的点都会有相同的尺寸。 让我们使用CSS变量和百分比值来优化代码([演示链接][7])。 ``` .dot { --d:radial-gradient(farthest-side,currentColor 90%,#0000); background:var(--d),var(--d); background-size:30px 30px; background-repeat:no-repeat; animation:m 1s infinite alternate; } @keyframes m{ 0% {background-position:0 0 ,100% 100%} 100%{background-position:0 100%,100% 0 } } ``` 变量-d将避免我们重复使用相同的梯度语法。对于百分比值来说,这更像是一种偏好,而不是一种优化。对我来说,处理数值比处理关键字更容易。 你已经眨眼了吗? 没问题,因为我们几乎已经完成了。我们有建立任何类型的装载点的所有成分。 **4) 创建loading** ------------ 要建立loading,你首先需要一支笔和一张纸。是的,我不是在开玩笑。人们往往跳进他们最喜欢的代码编辑器,开始写代码,试图在他们的头脑中想象事情应该如何运作。不,不,它不会那样工作。 你要把一切都写在纸上,然后把它转化为代码。 **第1步:定义你的结构** 在这一步,我们决定点的数量,它们的大小,间隙,等等。 因此,让我们假设我将使用4个大小为20x20的点,间隙为5px。这将给我一个95px的总宽度。我不希望它们跳得很厉害,所以让我们的高度为40px。 ![cf161ukquhp78mswusxy.jpeg][8] **第2步:编写代码** 我们把在(1)中定义的内容翻译成代码。 ``` .dot { width:95px; height:40px; --d:radial-gradient(farthest-side,currentColor 90%,#0000); background:var(--d),var(--d),var(--d),var(--d); background-size:20px 20px; background-repeat:no-repeat; } ``` 不要担心你目前得到的结果。你将只看到一个点,因为所有的点都在彼此的上方。我们还没有定义任何背景-位置。 **第三步:建立你的时间线** 在这一步,你需要用你的想象力来定义完整动画的每一帧。画出你心目中的动画的一步步图示。 这里有一个例子,我的动画将把所有的点从底部逐一移动到顶部,然后再把它们移回底部。 ![g1evqjld8qtkg4cqpu57.jpeg][9] 我有9个框架,重要的是要注意最后一个框架与第一个框架相同,以便有一个连续的动画。 第4步:将时间线转换为背景位置 现在你有了你的图画,简单地定义每一帧的背景位置。对于每个点,我们有一个固定的X坐标,只有Y会改变。 对于X,我们有以下值。0%, 33%, 66%, 100%. 这不是很直观,所以让我们使用另一种语法:calc(0*100%/3), calc(1*100%/3), calc(2*100%/3), calc(3*100%/3)。逻辑很简单:N个点,所以我们从0到N-1循环,然后我们除以N-1。 我们的动画的代码将是 ``` @keyframes m { ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 100%, calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 0 , calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} } ``` 乍看之下可能很复杂,但其实很简单。在每一帧内,我定义每个点的位置。X始终是相同的,我把Y从0(顶部)更新到100%(底部)。 我们有了我们的@keyframes! **第5步:找到关键帧的百分比** 最后一步是用百分比值填充? 我们有9个框架,所以我们考虑8个(总是N-1),我们用100%除以8,得到12.5%。我们从0%开始,按12.5%递增,直到达到100%。 你已经完成了! 现在把所有东西放在一起~~~。 ``` .dot { margin:20px auto; color:darkblue; width:95px; height:40px; --d:radial-gradient(farthest-side,currentColor 90%,#0000); background:var(--d),var(--d),var(--d),var(--d); background-size:20px 20px; background-repeat:no-repeat; animation: m 1s infinite; } @keyframes m { 0% {background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} 12.5%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} 25% {background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 100%, calc(3*100%/3) 100%} 37.5%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 100%} 50% {background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 0 } 62.5%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 0 } 75% {background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 0 , calc(3*100%/3) 0 } 87.5%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 0 } 100% {background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} } ``` [1]: http://guobacai.com/usr/uploads/2021/10/1255653393.gif [2]: http://guobacai.com/usr/uploads/2021/10/1255653393.gif [3]: https://codepen.io/t_afif/pen/abwLoxx [4]: http://guobacai.com/usr/uploads/2021/10/2671890697.png [5]: https://codepen.io/t_afif/pen/abwLOpj [6]: https://codepen.io/t_afif/pen/KKqXdgB [7]: https://codepen.io/t_afif/pen/BaZwoZJ [8]: http://guobacai.com/usr/uploads/2021/10/1073779996.jpeg [9]: http://guobacai.com/usr/uploads/2021/10/3036073383.jpeg 标签: javascript, css
评论已关闭