愉快的舞会c++_如何在5分钟内建立一个令人愉快的加载屏幕

愉快的舞会c++

First, here is what we will build. Set your timer!

首先，这是我们将要建立的。 设置您的计时器！

Does this look familiar?

这看起来很熟悉吗？

If yes, that’s because you’ve seen this somewhere — Slack!

如果是，那是因为您在某个地方看到了此内容- 松弛 ！

Let’s learn a few things by recreating this with just CSS and some good ol’ HTML.

让我们通过仅使用CSS和一些不错HTML来重新创建它来学习一些东西。

If you’re excited about writing some code, get on Codepen and create a new pen.

如果您对编写一些代码感到兴奋，请使用Codepen并创建一支新笔。

Now, let’s go!

现在，走吧！

1.标记 (1. The Markup)

The markup required for this is quite simple. Here it is:

为此所需的标记非常简单。 这里是：

<section class="loading">

For new sidebar colors, click your workspace name, then     Preferences > Sidebar > Theme

<span class="loading__author"> - Your friends at Slack</span>;    <span class="loading__anim"></span>

</section>

Simple, huh?

简单吧？

If you’re not sure why the class names have weird dashes, I explained the reason behind that in this article.

如果您不确定类名为何带有奇怪的破折号，我将在本文中解释其背后的原因。

There’s a bunch of text, and a .loading__anim span to “impersonate” the animated icon.

有一堆文本，并且有一个.loading__anim范围来“模拟”动画图标。

The result of this is the simple view below.

其结果是下面的简单视图。

2.将内容居中 (2. Center the Content)

The result isn’t the prettiest of stuff to behold. Let’s have the entire .loadingsection element entered in the page.

结果并不是最漂亮的东西。 让我们在页面中输入整个.loading部分元素。

body {  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;}

Looking better?

看起来好点吗？

3.设置加载文本的样式 (3. Style the Loading text)

I know. We will get to the animated stuff soon. For now, let’s style the .loading text to look a lot better.

我知道。 我们将尽快处理动画。 现在，让我们设置.loading文本的样式， .loading看起来更好。

.loading {  max-width: 50%;  line-height: 1.4;  font-size: 1.2rem;  font-weight: bold;  text-align: center;}

4.设置作者文本的样式以使其略有不同。 (4. Style the author text to look slightly different.)

.loading__author {  font-weight: normal;  font-size: 0.9rem;  color: rgba(189,189,189 ,1);  margin: 0.6rem 0 2rem 0;  display: block;}

There you go!

你去！

5.创建动画加载器 (5. Create the animated loader)

The much-anticipated step is here. This is going to be the longest of the steps, because I’ll be spending some time to make sure you understand how it works.

备受期待的步骤就在这里。 这将是最长的步骤，因为我将花一些时间来确保您了解其工作原理。

If you get stuck, drop a comment and I’ll be happy to help.

如果您遇到困难，请发表评论，我们将竭诚为您服务。

Hey, have a look at the loader again.

嘿，再看看装载机。

You’ll notice that half of its stroke is blue and the other half is grey. Okay, that’s sorted out. Also, HTML elements aren’t rounded by default. Everything is a box element. The first real challenge will be how to give the .loading__anim element half borders.

您会注意到其笔触的一半是蓝色，另一半是灰色。 好的，已经解决了。 另外， HTML元素默认情况下也不四舍五入。 一切都是盒子元素。 第一个真正的挑战是如何为.loading__anim元素设置半边框。

Don’t worry if you don’t understand this yet. I’ll come back to it.

如果您还不了解这一点，请不要担心。 我会回到它。

First, let’s sort out the dimensions of the loader.

首先，让我们整理一下装载机的尺寸。

.loading__anim {  width: 35px;  height: 35px; }

Right now, the loader is on the same line as the text. That’s because it is a span element which happens to be an HTML inline element.

现在，加载程序与文本在同一行。 那是因为它是一个span元素，恰好是HTML inline元素。

Let’s make sure the loader seats on another line, that is it begins on another line as opposed to the default behavior of inline elements.

让我们确保加载器位于另一行，即它是从另一行开始的，而不是inline元素的默认行为。

.loading__anim {   width: 35px;   height: 35px;   display: inline-block;  }

Finally, let’s make sure the loader has some border set.

最后，让我们确保加载程序设置了一些边框。

.loading__anim {   width: 35px;   height: 35px;   display: inline-block;   border: 5px solid rgba(189,189,189 ,0.25);  }

This will give a greyish 5px border around the element.

这将在元素周围显示一个灰色的 5px边框。

Now, here’s the result of that.

现在，这就是结果。

Not so great — yet. Let’s make this even better.

不太好-尚未。 让我们做得更好。

An element has four sides, top, bottom,left, and right

一个元素有四个边，即top ， bottom ， left和right

The border declaration we set earlier was applied to all the sides of the element.

我们之前设置的border声明应用于元素的所有侧面。

To create the loader, we need two sides of the element to have different colors.

要创建加载程序，我们需要元素的两侧具有不同的颜色。

It doesn’t matter what sides you choose. I have used the top and left sides below

选择哪一方都没有关系。 我已经使用了下面的top和left

.loading__anim {  width: 35px;  height: 35px;  display: inline-block;  border: 5px solid rgba(189,189,189 ,0.25);  border-left-color: rgba(3,155,229 ,1);  border-top-color: rgba(3,155,229 ,1);  }

Now, the left and top sides will have a blueish color for their borders. Here’s the result of that:

现在， left和top的边框将变为蓝色 。 结果如下：

We’re getting somewhere!

我们到了某个地方！

The loader is round, NOT rectangular. Let’s change this by giving the .loader__anim element a border-radius of 50%

装载机是圆形的，不是矩形的。 让我们通过为.loader__anim元素设置50%的border-radius来更改此设置

Now we have this:

现在我们有了这个：

Not so bad, huh?

还不错吧？

The final step is to animate this.

最后一步是对此进行动画处理。

@keyframes rotate { to {  transform: rotate(1turn) }}

Hopefully, you have an idea of how CSS animations work. 1turn is equal to 360deg , that is a complete turn rotates 360 degrees.

希望您对CSS动画的工作原理有所了解。 1turn等于360deg ，这是一个整圈旋转360度。

And apply it like this:

并像这样应用它：

animation: rotate 600ms infinite linear;

Yo! We did it. Does that all make sense?

！ 我们做到了。 这一切有意义吗？

By the way, see the result below:

顺便说一下，请看下面的结果：

Pretty cool, huh?

太酷了吧？

If any of the steps confused you, drop a comment and I’ll be happy to help.

如果有任何步骤使您感到困惑，请发表评论，我们将竭诚为您服务。

准备成为专业人士了吗？ (Ready to become Pro?)

I have created a free CSS guide to get your CSS skills blazing, immediately. Get the free ebook.

我已经创建了一个免费CSS指南，可让您立即掌握CSS技能。 获取免费的电子书 。

翻译自: https://www.freecodecamp.org/news/how-to-build-a-delightful-loading-screen-in-5-minutes-847991da509f/

愉快的舞会c++