CSS3动画中的虚线边框动画

  • Z时代
  • 2024-01-10
  • 分类：问答

我想在我的WP博客中添加它。这样，每个新的div帖子的边框上都会有此动画。但是问题在于它在SVG中。无论如何，我可以在不使用SVG的情况下使此动画工作，并且我也不想使用javascript。

可以说代码是：

.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}
<div class="go"></div>

回答：

CSS可以做到这一点，并且在使用多个背景并使用动画更改其位置时非常简单。

.border {
  height: 100px;
  width: 200px;
  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;
}
.border:hover{
    background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border">Some text</div>

这是一个页面加载后边框连续不断移动的示例。

.border {
  height: 100px;
  width: 200px;
  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: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}
@keyframes border-dance {
  0% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border">Some text</div>

归功于web-tiki，它有助于修复最初在动画每个循环结束时出现的轻微失真。

以上是 CSS3动画中的虚线边框动画 的全部内容， 来源链接： utcz.com/qa/434164.html

回到顶部