使用CSS移动虚线边框 [英] Moving dotted border using CSS

问题描述

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

有没有办法实现这一点？

$ b

一般情况下，这个动画是一个动画， border-style 赋予您的样式是静态呈现的;它根本不可能动画他们。

即使使用CSS3，你的选择是相当有限的。你可以用 border-image 做的最好的做法是使用精心制作的动画GIF（同样，这将取决于浏览器如何实现

>否则你可以尝试 :: before 和 :: after 伪元素来实现你想要的效果。 p>

但是，除非你能确保你的动画符合相关的WCAG指南，特别是2.2.2和2.3，我强烈建议你不要使用动画-GIF看。除了对某些人是危险的，一个制作精良的动画可能会变得比大多数有用的更烦人 - 这是使动画GIF这么臭名昭着的回来在一天。

换句话说，谨慎使用这种技术，并且只有当你知道它增加了用户体验，而不是取消它。

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.

Is there any way to achieve this?

解决方案

This depends on what exactly you want the animation to look like.

In general, the styles given to you by border-style are rendered statically; it's simply not possible to animate them.

Even with CSS3, your options are fairly limited. The best you can do with border-image is either with a carefully-crafted animated GIF (again, it would depend on how a browser implements border-image with animated images), or with a gradient animation — and whichever you choose depends on browser compatibility and how you want your effect to look.

Otherwise you can experiment with ::before and ::after pseudo-elements to achieve your desired effect.

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.

In other words, use this technique sparingly, and only when you know it adds to the user experience rather than taking away from it.

这篇关于使用CSS移动虚线边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！