【问题标题】：Dashed border animation in css3 animationcss3动画中的虚线边框动画
【发布时间】：2015-02-06 12:28:42
【问题描述】：

看到这篇文章http://tympanus.net/Tutorials/BorderAnimationSVG/

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

假设代码是：

.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}

&lt;div class="go"&gt;&lt;/div&gt;

【问题讨论】：

是的，仅使用纯 CSS 即可。然而，这将是一个非常冗长的解决方案，包含几个包装容器、伪元素和 CSS 动画/过渡。但不是很困难。
你能请举个例子吗
@Sarthakkiller: CSS 也有一个简单的例子，但是你也想要反向边框动画吗？那是在方向上悬停并在另一个方向上反转？您还需要虚线边框还是像演示中那样的完整实线边框好？
是的！我想要最近的可能。@Harry

标签： javascript jquery html css

【解决方案1】：

这可以通过 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 帮助修复动画每个循环结束时最初出现的轻微失真。

【讨论】：

是的@SarthakSharma。这只是我认为可以实现的最接近的结果。我正在尝试看看它是否可以改进。否则将删除它。
@SarthakSharma：那是我的最后一次更新。可以实现边界的连续移动，但不会发生反向移动，反之亦然（至少对于这个答案）。
我们可以让它连续吗？
连续你的意思是只要悬停就让边框一直移动吗？如果是，这个fiddle 是您可以尝试的示例。
让我们continue this discussion in chat.

【解决方案2】：

基于harry的回答

这可以为所有大小的所有形状设置动画

div{
margin:10px;
}
.size1{
background:black;
width:100px;
height:100px;
}

.size2{
background:black;
width:300px;
height:100px;
}


.active-animatioon {
    background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right   top;
    animation: border-dance 1s infinite linear;
  }
  @keyframes border-dance {
    0% {
      background-position: left top, right bottom, left bottom, right   top;
    }
    100% {
      background-position: left 15px top, right 15px bottom , left bottom 15px , right   top 15px;
    }
  }
}

<div class="size1 active-animatioon"></div>
<div class="size2 active-animatioon"></div>

【讨论】：

这是一个很好的解决方案，使用 top bottom left 和 right。其他一些解决方案在动画中有“打嗝”或水平/垂直速度不同。这看起来很棒！

【解决方案3】：

这是一种无需指定要旋转边框的元素大小的方法：

.rotating-border {
  width: max-content;
  background: linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}

@keyframes border-dance {
  0% {
    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
  }
  100% {
    background-position: 100% 0, 0 100%, 0 0, 100% 100%;
  }
}

&lt;div class="rotating-border"&gt;Hello World&lt;/div&gt;

【讨论】：

希望我在自己重新创建之前向下滚动到这个答案?

【解决方案4】：

使用纯 CSS，您可以使用 repeating-linear-gradient 在背景上绘制点，设置 transition 并在悬停时移动背景。

示例 css 代码：

.animationBorder {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 12px;
  width: 200px;
  height: 200px;
  color: black;
  font-size: 20px;
}
.animationBorder:hover .background {
  background-position: 100px 0;
}
.background, .content {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.background {
  transition: 1200ms;
  background-color: black;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
  background-size: 30px;
}
.content {
  transition: 200ms;
  margin: 1px;
  line-height: 200px;
  text-align: center;
  background-color: white;
}

演示：

.animationBorder {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 12px;
  width: 200px;
  height: 200px;
  color: black;
  font-size: 20px;
}
.animationBorder:hover .background {
  background-position: 100px 0;
}
.background, .content {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.background {
  transition: 1200ms;
  background-color: black;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
  background-size: 30px;
}
.content {
  transition: 200ms;
  margin: 1px;
  line-height: 200px;
  text-align: center;
  background-color: white;
}

<span class="animationBorder">
  <div class="background"></div>
  <div class="content">My post</div>
</span>

【讨论】：

虽然根据我的经验，这不是最跨浏览器兼容的解决方案，但它适用于 chrome。
我还能让它继续吗？我的意思是不使用悬停
这简直太棒了，而且比我自己的答案好得多。
@jbutler483 完全同意，是一个概念证明
@IrvinDominin：（不要告诉任何人）对于我们这些人来说，这是你的答案和你的代码:)

【解决方案5】：

动画伪元素更适合我的圆形按钮：

.border {
    position: relative;
    border: 0;
    height: 4rem;
    width: 4rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 100%;
  border: 2px dashed limegreen;
  animation: rotate 20s linear infinite;
}
  
@keyframes rotate {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

&lt;div class="border"&gt; hello &lt;/div&gt;

【讨论】：

【解决方案6】：

此代码改编自 @Harry 编写的答案，针对 @dude 发布的问题进行了修改，适用于任何宽度和高度的 div。

.box
{
  position: absolute;
  left: 20px;
  top: 20px;
  width: 150px;
  height: 150px;
}

.dashed 
{
  background: 
    linear-gradient(90deg, blue 50%, transparent 50%),
    linear-gradient(0deg, blue 50%, transparent 50%),
    linear-gradient(90deg, blue 50%, transparent 50%),
    linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size: 15px 4px, 4px 15px, 15px 4px, 4px 15px;
  background-position: left top, right top, left bottom, left top;
  padding: 4px;
  animation: border-dance 4s infinite linear;
}
	
@keyframes border-dance 
{
  0%
  {
    background-position: left top, right top, right bottom, left bottom;
  }
  100% 
  {
    background-position: right top, right bottom, left bottom, left top;
  }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel volutpat ante, eu convallis turpis. Cras sit amet est diam. Suspendisse non lectus faucibus, egestas enim quis, feugiat sapien. Nulla pellentesque, risus sit amet ultrices congue, nisl
ante semper est, in tempor eros augue quis tellus. Morbi venenatis varius eros sit amet dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lobortis sit amet lacus quis tincidunt. Curabitur nibh ex,
imperdiet sit amet sem a, ornare vehicula ipsum. Quisque vitae dui dignissim, viverra enim et, porta risus. Pellentesque pharetra at neque eu efficitur.
<div class="box dashed"></div>

【讨论】：

漂亮的行军蚂蚁效果 :)
我认为没有按预期工作......可能想要更新这个答案

【解决方案7】：

这只是一个简单的示例，但它使用伪效果来“移动”悬停时的边框（注意。如果您想“继续”效果，关键帧会更有益）

.go {
  width: 900px;
  height: 200px;
  position:relative;
  border:8px dashed black;
}

.go:hover:before{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:-8px;
  left:-8px;
  border: 8px solid black;
  }

.go:hover:after{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:-8px;
  left:-8px;
  border: 8px dashed white;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="go">hover then 'unhover' to see effect</div>

一个更好的例子

这可能更适合你，因为动画也更容易继续：

.bord {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
}
.spinner {
  position: absolute;
  height: 90%;
  width: 90%;
  background: black;
  top: 5%;
  left: 5%;
  transition: all 0.4s;
}
.go {
  position: absolute;
  height: 90%;
  width: 90%;
  background: white;
  top: 5%;
  left: 5%;
}
.bord:hover .spinner {
  transform: rotate(90deg);
  height: 300px;
  width: 300px;
  top: 0;
  left: 0;
}

<div class="bord">
  <div class="spinner"></div>
  <div class="go">hover me!</div>
</div>

【讨论】：

我可以增加破折号的空间，让它看起来像例子