如何在没有 SVG 或 JavaScript 的情况下创建 CSS3 边框动画？

无需 SVG 或 JavaScript 的 CSS3 边框动画

tympanus.net 上常见的边框动画通常使用 SVG 创建，可以使用纯 CSS3 重新创建。本文介绍了所涉及的步骤。

创建动画

使用多个背景并对其位置进行动画处理可以实现此效果。代码以以下 HTML 开头：

<code class="html"><div class="border">
  Some text
</div></code>

动画的 CSS 包括四个线性渐变，用于在所有边上创建虚线边框：

<code class="css">.border {
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;
  padding: 10px;
  transition: background-position 2s;
}</code>

这将建立具有四个线性渐变的背景：虚线边框。

悬停时，背景位置会被修改以创建动画效果：

<code class="css">.border:hover {
  background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}</code>

实现

要将此动画添加到每个博客文章 div，只需将“border”类添加到 WordPress 模板中的 div 即可。

此技术提供了一个简单且仅 CSS 的解决方案，用于将所需的边框动画添加到您的 WordPress 博客文章中。

以上是如何在没有 SVG 或 JavaScript 的情况下创建 CSS3 边框动画？的详细内容。更多信息请关注PHP中文网其他相关文章！