使用CSS实现移动的虚线边框

Question

我有一个类，它可以在运行时将虚线样式边框属性应用于文本块。我正在尝试使用CSS找到一个解决方案，使边框像gif图像一样移动。

有没有办法实现这个效果？

- mehul9595

---

@Jeremy Battle：BoltClock 是一枚时钟。它仅仅是向前移动了时间，阅读了您发布的评论，然后回到过去在您之前发布了该评论。 - user142019

我觉得很有趣，有这么多人说你不应该这样做。我相信你的问题关于“如何”，而不是关于“是否”。 - Joel Glovier

@jag2007：是的，正确，我的观点是应该这样做。 - mehul9595

+1 请这样做。我可以看到这将增加良好的用户体验的情况（尝试在Google日历上创建事件时找到时间）。 - Stephen Watkins

这是一种方法 - http://codepen.io/techniq/pen/gzyHI。 - vsync

Answer 1

虽然不是CSS3，但它可以工作：http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page

您可以使用CSS3渐变来制作条纹，并通过动画化背景位置（粗略演示：http://codepen.io/christopheschwyzer/pen/CEwBI）而不需要图像，但我不建议这样做，因为它只能在Webkit上表现良好。

- Lea Verou

---

演示链接已经失效。 - Mohammad Usman

Answer 2

我根据这篇文章制作了一个完整的示例。享受吧！

.outer {
  position: absolute;
  
  left: 100px;
  top: 50px;
  width: 100px;
  height: 100px;
  
  background-image: url(http://matthewjamestaylor.com/blog/selection.gif);
  
  border: 1px solid;
}

.selected {
  border: 0px;
}

.inner {
  position:absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;

  background-color: #9CF;
}

.selected .inner {
  margin: 1px;
}

<div class="outer selected">
  <div class="inner" />
</div>

- Andrey Talnikov

---

链接已经失效。 - gustavopch

Answer 3

这取决于您希望动画看起来像什么。

通常情况下，通过 border-style 提供给您的样式是静态呈现的；无法对它们进行动画处理。

即使使用 CSS3，您的选择也相当有限。通过 border-image，您可以做的最好的事情要么是使用精心制作的动画 GIF（再次取决于浏览器如何实现带有动画图像的 border-image ），要么使用渐变动画-您选择哪种取决于浏览器兼容性和您想要的效果。

否则，您可以尝试使用 ::before 和 ::after 伪元素来实现所需的效果。

作为一个警告，除非您能确保您的动画符合相关的 WCAG 指南，特别是 2.2.2 和 2.3，否则我强烈建议不要去追求动画 GIF 的外观。除了对某些人有危险性之外，粗制滥造的动画可能会比大多数人更令人讨厌-这就是当年使动画 GIF 如此臭名昭着的原因。

换句话说，要谨慎使用这种技术，只有当您知道它会增加用户体验而不是减少用户体验时才使用它。

- BoltClock

---

你可以建议他使用 blink 标签，还有什么更好的呢 :) - Myles Gray

你甚至都没有看到他想要实现的图形，你怎么能说它看起来很丑呢？他可能会找到一个完全合理的解决方案。 - easwee

是的 - 实现这个的唯一方法是使用一个动画 .gif（2px 黑白相间的）作为边框图像。 - Joel Glovier

@Maarten：这将会很烦人，无论是对于供应商来实现（除非你正在过渡，否则已经完成），还是对于用户来查看。 - BoltClock

我知道我来晚了，但是这里有很多傲慢的言论。我可以想到至少一个好用途的动画边框属性，它既不会打扰，又有吸引力和实用性——将底部边框用作保存按钮上的进度指示器。我相信还有许多其他用途。你为什么不专注于回答问题，而不是在没有了解他所处理的用例的情况下对这个想法进行诋毁呢？ - Isochronous

@Isochronous：你知道吗，你说得对。当我写下原始答案时，我非常愤世嫉俗，我想那些点赞的人也是这样。虽然我仍然不相信有一半的人会阅读这篇文章并不去做过度的闪烁效果，但现在我至少可以告诫读者不要这样做。 - BoltClock

Answer 4

以下是一种相当灵活的 SCSS 选项：

$antlength: 50px;
$antwidth: 10px;
$antcolor: black;

@keyframes marching-ants {
    0%   {background-position: 0 0, $antlength 100%, 0 $antlength, 100% 0;}
    100% {background-position: $antlength 0, 0 100%, 0 0, 100% $antlength;}
}

.ants {
    background-image: linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: $antlength $antwidth, $antlength $antwidth, $antwidth $antlength, $antwidth $antlength;
    animation: marching-ants 400ms infinite linear;
}

Collapsed to a snippet:

@keyframes marching-ants {
  0% {
    background-position: 0 0, 50px 100%, 0 50px, 100% 0;
  }
  100% {
    background-position: 50px 0, 0 100%, 0 0, 100% 50px;
  }
}

.ants {
  background-image: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(0, black 50%, transparent 50%), linear-gradient(0, black 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 50px 10px, 50px 10px, 10px 50px, 10px 50px;
  animation: marching-ants 400ms infinite linear;
}

<div class="ants">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

- Charlie

---

演示：https://jsfiddle.net/j3epnurd/ - SAMPro

谢谢@SAMPro，我现在也将其添加为代码片段。 - Charlie

Answer 5

我也在寻找这样的解决方案，因为我正在尝试模拟Excel使用的动画边框，以指示当前选择已被剪切并等待粘贴。

俗气吗？不，在我打算使用的情况下不是。

我找到了这个jQuery插件：http://there4development.com/projects/animatedborder/，原帖发布者可能会想要试一试。

- Steven Herod

Answer 6

这里有两个使用border-image的例子。 优点：

• 只需要一个
• 内部可以真正透明

.selected {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50px;

  border: 1px solid transparent;
  box-sizing: border-box;

  border-image-outset: 0px;
  border-image-repeat: repeat;
  border-image-source: url("http://matthewjamestaylor.com/blog/selection-big.gif");
}

.v1 {
  left: 100px;

  border-image-slice: 6;
  border-image-width: 1px;
}

.v2 {
  left: 300px;

  border-image-slice: 3;
  border-image-width: 2px;
}

<p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam metus hendrerit venenatis placerat. Morbi sem ex, egestas at egestas iaculis, imperdiet in mauris. Nulla facilisi. Aliquam eu porttitor libero, vel porta ipsum. Proin egestas consequat urna, et rhoncus arcu congue vitae. Maecenas at massa mollis, accumsan mauris in, faucibus ligula. Nulla sed lorem pharetra lacus dictum lobortis sit amet id tellus. Vestibulum porta auctor maximus. Fusce congue, orci et feugiat ultricies, turpis mi egestas est, nec vulputate nulla risus quis lorem. Sed vitae risus rhoncus, ultricies nunc non, mollis mauris.</p>

<div class="selected v1">
</div>

<div class="selected v2">
</div>

- Vi.

Answer 7

您是想让点状边框有动画效果吗？

您可以尝试使用CSS 3边框图片，这样可以为您的边框提供一个（动态）gif，不过这种方法可能不支持IE浏览器。

- RoToRa

Answer 8

你可以在背景中使用GIF图像，唯一的解决方案是通过CSS来实现。否则就只能使用JavaScript。

- Umair Jabbar