使用CSS移动虚线边框

前端之家收集整理的这篇文章主要介绍了使用CSS移动虚线边框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个类,在运行时将一个虚线的边框属性应用于一个文本块。我试图找到一个解决方案,使用CSS,使边框移动像一个gif图像。

有没有办法实现这一点?

解决方法

这取决于你想要什么样的动画看起来像。

一般来说,边框样式给你的样式是静态呈现的;它根本不可能为他们动画。

即使使用CSS3,您的选项也相当有限。您可以使用边框图像做的最好的一个是精心制作的动画GIF(再次,它将取决于浏览器如何使用动画图像实现边框图像),或者使用渐变动画 – 无论选择哪种都取决于浏览器兼容性以及您想要的效果如何。

否则你可以试验:: before和::之后的伪元素来实现你想要的效果

尽管如此,除非您能确保您的动画符合相关的WCAG指南,特别是2.2.2和2.3,否则我强烈建议不要特别注意GIF动画。除了对某些人来说有危险之外,制作不佳的动画可能会比大多数人更为恼人 – 这就是当天生成的动画GIF如此臭名昭着。

换句话说,谨慎使用这种技术,只有当你知道它增加用户体验,而不是从中删除它。

猜你在找的CSS相关文章