使用 CSS 移动虚线边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5261122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving dotted border using CSS
提问by mehul9595
I have class that applies a dotted style border property to a text block at runtime. I am trying to find a solution, using CSS, that makes the border move like a gif image.
我有一个类在运行时将虚线样式边框属性应用于文本块。我试图找到一个解决方案，使用 CSS，使边框像 gif 图像一样移动。
Is there any way to achieve this?
有没有办法实现这一目标？
采纳答案by BoltClock
This depends on what exactly you want the animation to look like.
这取决于您究竟希望动画看起来像什么。
In general, the styles given to you by border-styleare rendered statically; it's simply not possible to animate them.
一般来说，by 给你的样式border-style是静态渲染的；根本不可能为它们设置动画。
Even with CSS3, your options are fairly limited. The best you can do with border-imageis either with a carefully-crafted animated GIF (again, it would depend on how a browser implements border-imagewith animated images), or with a gradient animation — and whichever you choose depends on browser compatibility and how you want your effect to look.
即使使用 CSS3，您的选择也相当有限。您可以做的最好的事情border-image是使用精心制作的动画 GIF（同样，这将取决于浏览器如何实现border-image动画图像），或者使用渐变动画——无论您选择哪种都取决于浏览器兼容性以及您想要的方式效果来看看。
Otherwise you can experiment with ::beforeand ::afterpseudo-elements to achieve your desired effect.
否则，您可以尝试使用::before和::after伪元素来实现您想要的效果。
As a word of warning, though, unless you can ensure your animation meets the relevant WCAG guidelines, in particular 2.2.2 and 2.3, I strongly advise against especially going for the animated-GIF look. On top of being dangerous to certain people, a poorly-crafted animation may turn out more annoying than helpful to most — this is what made animated GIFs so infamous back in the day.
不过作为一个警告，除非您能确保您的动画符合相关的 WCAG 准则，尤其是 2.2.2 和 2.3，否则我强烈建议不要特别使用动画 GIF 外观。除了对某些人造成危险之外，制作拙劣的动画对大多数人来说可能更令人讨厌，而不是对大多数人有帮助——这就是当时动画 GIF 如此臭名昭著的原因。
In other words, use this technique sparingly, and only when you know it adds to the user experience rather than taking away from it.
换句话说，请谨慎使用此技术，并且仅当您知道它会增加用户体验而不是剥夺它时。
回答by Lea Verou
Not CSS3, but it works: http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page
不是 CSS3，但它有效：http: //matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page
You can make it without images, by utlizing CSS3 gradients for the stripes and animating background-position (rough demo: http://codepen.io/christopheschwyzer/pen/CEwBI), but I wouldn't recommend it since it would only work well on Webkit.
您可以通过为条纹使用 CSS3 渐变并设置背景位置动画（粗略演示：http://codepen.io/christopheschwyzer/pen/CEwBI）来制作没有图像，但我不会推荐它，因为它只能工作在 Webkit 上很好。
回答by Andrey Talnikov
I've made a complete examplebased on this article. Enjoy!
.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>回答by Steven Herod
I'm also looking for such a solution since I'm trying to simulate the animated border that excel uses to indicate that the current selection has been cut and is waiting to be pasted.
我也在寻找这样的解决方案，因为我正在尝试模拟 excel 用来指示当前选择已被剪切并等待粘贴的动画边框。
Tacky? No, not in the context of the use I intend.
俗气？不，不是在我打算使用的上下文中。
I found this jQuery plugin. http://there4development.com/projects/animatedborder/, the orginal poster might want to give it a go.
我找到了这个 jQuery 插件。 http://there4development.com/projects/animatedborder/，原始海报可能想试一试。
回答by Vi.
Here are two examples using border-image.
下面是两个使用border-image.
Advantages :
好处 ：
- Only one div
- Inside can be truly transparent
- 只有一个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>回答by RoToRa
Do you mean you want to animate the dotted border?
您的意思是要为虚线边框设置动画吗？
You could look into CSS 3 border images, which would allow you to provide an (animated) gif for your border, if you don't mind not supporting IE.
如果您不介意不支持 IE，您可以查看CSS 3 边框图像，这将允许您为边框提供（动画）gif。
回答by Charlie
Here's a pretty flexible SCSS option:
这是一个非常灵活的 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;
}
回答by Umair Jabbar
you can use a gif image in the background, the only solution for doing it via css. otherwise your javascript
您可以在背景中使用 gif 图像，这是通过 css 执行此操作的唯一解决方案。否则你的javascript
