使用CSS移动虚线边框

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.

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

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

折叠成一个片段：

$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;
}

@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;
}