Question

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

有没有办法实现这个目标？

Answer 1

不是CSS3，但它有效：http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page

你可以通过为条纹设置CSS3渐变和动画背景位置（粗略演示：http://codepen.io/christopheschwyzer/pen/CEwBI）来制作没有图像的图片，但我不推荐它，因为它只适用于Webkit。 / p>

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>

Answer 3

这取决于你想要动画的确切位置。

通常，border-style给你的样式是静态呈现的;它根本不可能为它们制作动画。

即使使用CSS3，您的选择也相当有限。使用border-image可以做的最好的事情是使用精心设计的动画GIF（再次，它取决于浏览器如何使用动画图像实现border-image），或者使用渐变动画 - 无论你是哪一个选择取决于浏览器兼容性以及您希望效果的外观。

否则，您可以尝试使用::before和::after伪元素来达到预期的效果。

但是，作为警告，除非您能确保您的动画符合相关的WCAG指南，特别是2.2.2和2.3，否则我强烈建议您不要使用动画GIF外观。除了对某些人造成危险之外，一部制作精良的动画可能会让人觉得比对大多数人更有帮助 - 这就是让动画GIF在当天臭名昭着的原因。

换句话说，谨慎使用这种技术，只有当你知道它会增加用户体验而不是从中消失时。

Answer 4

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

粘性？不，不是在我打算使用的上下文中。

我找到了这个jQuery插件。 http://there4development.com/projects/animatedborder/，原始海报可能想要试一试。

Answer 5

以下是使用border-image的两个示例。

优势：

只有一个div
内部可以真正透明

.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>

Answer 6

你的意思是你想要为虚线边框设置动画吗？

您可以查看CSS 3 border images，如果您不介意不支持IE，则可以为您的边框提供（动画）gif。

Answer 7

这是一个非常灵活的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;
}

Answer 8

你可以在后台使用gif图像，这是通过css实现它的唯一解决方案。否则你的javascript

使用CSS移动虚线边框

8 个答案: