脸谱网在CSS中加载动画

以下是Fabrice Weinberg的客座帖子。我知道法布里斯通过他出色的代码笔工作。他从看似无处不在的地方汲取灵感，并通过CSS精心地重新创建东西。他给我发了这篇教程，介绍了他重新创作他最受欢迎的钢笔之一的技巧，我非常乐意发表这篇文章！我在这里学到了一些技巧。大家好！CSS3简直太棒了。发展很快，可能性无穷。今天我想告诉你如何在CSS中使用多个背景图像和线性渐变来制作一个很棒的动画。我们将只使用一个HTML元素来构建脸谱网加载动画。为了简单起见，您将不会在CSS中看到任何供应商前缀。在我们开始创建脸谱网加载动画之前，我将解释基本技术。 background image 我们都知道background image属性。你给它一个url()指向一个外部图像文件（或一个数据URI），使该图像显示为任何HTML元素的背景。现在可以使用线性渐变或径向渐变作为背景图像。这打开了一个全新的背景世界，只需代码就可以生成。我不打算解释语法（你可以从过去的两个链接中得到），但我会给你一些技巧，帮助你创建非常棒的图案和几乎任何形状。有用的技巧是一次可以添加多个背景图像。 div {background-image:background-image[, background-image]* /* optional additional backgrounds */} 有关详细信息，请参阅MDN:背景图像。要查看其他人使用这些属性创建的内容，请查看此图库。如何使用线性渐变绘制让您从一些基本的线性渐变开始，以了解其语法。 background-image: linear-gradient(90deg, blue, red); 要查看语法及其所有可能性，请查看MDN:线性渐变。此结果是：在蓝色和红色之间有一个很好的渐变。但总是画一个梯度会很无聊。生成这样的模式是不是很棒：那么让我们来做吧！看看上面的图案。你会看到四种不同的颜色，每种颜色需要四分之一的宽度。用百分比表示，我们得到25%（100%/4）。对于这种简单的图案，我建议您使用百分比，这样图案将动态地适应元素的大小。要将图像图案转换为linear-gradient，我们将从最左边的颜色开始。蓝色，在这种情况下。 background-image: linear-gradient(90deg, blue 25%); 这将导致背景图像空白。要使linear-gradient工作，我们必须至少加两种颜色。让我们添加下一个颜色，绿色： background-image: linear-gradient(90deg, blue 25%, green 25%); 第一个颜色值是特殊的，因为\"蓝色25%\"并不意味着蓝色从25%开始。在这种情况下，\"蓝色25%\"意味着蓝色扩散到25%。我们得到的是：正是我们想要的，蓝色和绿色的明显分离。但正如你可能注意到的，我们必须写25%的蓝色和绿色。在开发过程中，这是非常烦人的，因为您必须更改这两个值以保持清晰的分离。在使用线性渐变时，我找到了一个很好的方法来简化这一过程： background-image: linear-gradient(90deg, blue 25%, green 0); 现在我们只需将绿色的位置设置为\"0\"。我们用它实现的是，绿色总是从与前一种颜色完全相同的位置开始，在这里是蓝色。结果与之前相同，但现在只需更改一个值即可更改蓝色矩形的大小。添加剩余的颜色变得非常容易，因为我们现在知道如何创建锐利的颜色切割。 background-image: linear-gradient(90deg, blue 25%, green 0, green 50%, red 0, red 75%, yellow 0); 现在您可以了解为什么第一个颜色值是特殊的。对于其他颜色，我们必须定义两次。一次用于起始位置，另一次用于指定它将扩展多远。结果：我们如何制作形状？要使用background image属性创建一些基本形状，我们将从以下内容开始： .squareandcircle{width: 40px;height: 30px;background-image: linear-gradient(90deg, blue, blue),radial-gradient(center, circle, green 10px, transparent 0);background-size: 15px 15px,20px 20px;background-position: 00,20px 10px;background-repeat:no-repeat;} 我们使用多个背景图像，结合背景大小和背景位置来创建正方形和圆形。那么它是如何工作的呢？首先，我们要创建背景图像。为了简单起见，我们使用最基本的线性渐变和最基本的径向渐变。现在进一步讨论下一个属性：background size background size属性将按照创建时的顺序设置每个先前创建的背景图像的大小。因此在我们的示例中，线性渐变的大小是15x15px。径向梯度是20x20px。每个背景的位置：背景位置知道我们在一个大小为15x15px的正方形上有两个图像，在一个大小为15x15px的圆形上有一个图像

脸谱网在CSS中加载动画

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么