css编写

Hey there amazing human! I came across this dope loader animation a while ago and I thought I should code that. Today in this blog post, we’re gonna code that together! Sounds interesting? Then lest’s jump right into it!

嘿，那里的人类真棒！ 前段时间我遇到了这个涂料加载器动画，我认为我应该对此进行编码。 今天在这篇博客中，我们将一起编写代码！ 听起来不错？ 然后，免得直接跳进去！

入门代码 (Starter code)

This is the initial code that we’re gonna be starting with

这是我们要开始的初始代码

入门HTML (Starter HTML)

<div class="box"> <div class="container"> <span class="circle"></span> <span class="circle"></span> </div></div>

入门级CSS (Starter CSS)

/* I don't like the default styles applied by the browsers */*, *::before, *::after{ margin: 0; padding: 0; box-sizing: border-box;}body{ display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: #c5cae9;}.box { width: 300px; height: 300px; background: #1a237e; display: flex; justify-content: center; align-items: center; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);}.container { height: 15px; width: 105px; display: flex;}.container .circle { width: 15px; height: 15px; border-radius: 50%; background-color: #fff; margin-right: 30px;}

This should result in something that looks like this:

这应导致如下所示：

Yes, there are just two circles for now

是的，目前只有两个圈子

让我们动起来 (Let’s get movin)

Let us now start by moving these circles to the right. In order to do that we’ll need a keyframe animation.

现在让我们开始将这些圆圈向右移动。 为此，我们需要关键帧动画。

@keyframes move { from { transform: translateX(0px); } to { transform: translateX(45px); }}

The code is pretty straight forward. We are starting from 0px and moving the circles 45px(15px + 30px margin) to the right. We’re using transform to move the circles. You could also use left with couple of extra steps but it’s better to use transform performance wise.

该代码非常简单。 我们从0px开始，将圆圈向右移动45px(15px + 30px边距)。 我们正在使用transform移动圆。 您还可以使用left几个额外的步骤，但是最好使用明智的转换性能。

Now that we’ve coded a keyframe animation, let’s apply it to the circles.

现在，我们已经编码了关键帧动画，让我们将其应用于圆上。

.container .circle { width: 15px; height: 15px; border-radius: 50%; background-color: #fff; margin-right: 30px; /* added line */ animation: move 500ms linear 0ms infinite;}

In animation property, we’ll mention the animation name and other attributes. Let’s break down this line.

在动画属性中，我们将提到动画名称和其他属性。 让我们分解这条线。

The keyframe’s name is move

关键帧的名称为move Animation duration is 500 mili seconds

动画持续时间为500毫秒 The timing function is linear

定时功能是线性的 There’s a delay of 0ms

延迟为0毫秒 The number of iterations are infinite

迭代次数是无限的

AND we have the two moving circles! The first step is done!

而且我们有两个运动的圈子！ 第一步完成！

成长与收缩 (Grow and shrink)

Now on to the next step, we need to make the first circle look like it’s coming from behind or make it look like it’s growing. For that, we need to add a circle to our html, inside the container div

现在进行下一步，我们需要使第一个圆圈看起来像是从后面来的，或者看起来像它正在成长。 为此，我们需要在容器div内的html中添加一个圆圈

<!-- added line --> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span>

To achieve the desired effect we need to position it absolutely with respect to the container. So we need to add position: relative to the . container class and then position the first circle.

为了获得理想的效果，我们需要将其相对于容器绝对定位。 因此，我们需要添加位置：相对于。 容器类，然后定位第一个圆。

.container { height: 15px; width: 105px; display: flex; /* added line*/ position: relative;}

To select the first circle, we’re gonna use a pseudo selector

要选择第一个圆圈，我们将使用伪选择器

.container .circle:first-child { position: absolute; top: 0; left: 0;}

We have now successfully positioned the first circle. We now need to write keyframe animation to animate it. Let’s call the animation grow.

现在，我们已经成功定位了第一个圆。 现在，我们需要编写关键帧动画以对其进行动画处理。 我们称动画为增长。

@keyframes grow { from { transform: scale(0, 0); opacity: 0; } to { transform: scale(1, 1); opacity: 1; }}

This time, we’re animating two properties, we are increasing opacity and we are scaling the circle. Let’s apply this to the first circle

这次，我们为两个属性设置了动画，增加了不透明度，并缩放了圆。 让我们将其应用于第一个圈子

.container .circle:first-child { position: absolute; top: 0; left: 0; /* added line */ animation: grow 500ms linear 0ms infinite;}

LOOK AT THAT! We’re almost there.

看那个！ 我们快到了。

We need one more circle. Add that to the html inside .container class

我们还需要一个圆圈。 将其添加到.container类中的html中

<span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <!-- added line --> <span class="circle"></span>

We gotta make this circle stay at the end of the .container class. Yes! you guessed it! We need to add position: absolute to the last circle. Again we’ll be using pseudo selector.

我们必须让这个圈子停留在.container类的末尾。 是! 你猜到了！ 我们需要添加位置：绝对值到最后一个圆。 再次，我们将使用伪选择器 。

<span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <!-- added line --> <span class="circle"></span>

ON TO THE LAST STEP! We need to shrink it and decrease the opacity. Rather than writing a keyframe for this, we’re gonna use the existing grow keyframe but we’ll reverse it.

迈出最后一步！ 我们需要缩小它并减少不透明度。 与其为此编写关键帧，不如使用现有的增长关键帧，但我们将其反转。

.container .circle:last-child { position: absolute; top: 0; right: 0; /* added line */ animation: grow 500ms linear 0s infinite reverse;}

To do that, all we need to do is add the direction the animation property. It’s set to forwards by default. We are gonna set it to reverse.

为此，我们要做的就是添加animation属性的方向。 默认情况下设置为转发。 我们将其设置为反向。

VOILA! We did it! We have successfully coded the dope loader. Ain’t that illusion of continuity amusing?! Thank you for reading! Thank you for your time and patience. I hope this helped. Happy Coding and have a great day!

瞧！ 我们做到了！ 我们已经成功编码了涂料装载器。 那种连续性的幻想不是很有趣吗？ 感谢您的阅读！ 感谢您的时间和耐心等待。 希望对您有所帮助。 祝您编码愉快，并拥有美好的一天！

Originally published at https://sudeepgumaste.hashnode.dev.

最初发布在 https://sudeepgumaste.hashnode.dev 。

翻译自: https://medium.com/swlh/lets-code-a-dope-loader-with-css-c2d48e31050d

css编写

相关资源：微信小程序源码-合集6.rar