向带有CSS的虚线边框添加闪烁的动画。
向带有CSS的虚线边框添加闪烁的动画。
提问于 2022-02-24 09:08:22
我试着做一个动画的虚线框边框，来回移动，有点闪烁的风格。(就像下面链接中的第三个黄色边框一样。)
http://there4.io/2013/01/03/jquery-animated-borders/
然而，这是由JavaScript构建的。我无法将虚线边框更改为虚线样式。
当我寻找一个CSS解决方案，而不是谨慎地移动，我发现大多数情况下有一个平滑的动画。
例如：https://css-tricks.com/more-control-over-css-borders-with-background-image/
如何通过虚线边框实现闪烁效果？
回答 1
Stack Overflow用户
发布于 2022-02-28 19:22:30
我还没有弄明白如何使它(与实际的圆圈)点，而不是虚线，但您可以使动画眨眼，而不是顺利地移动，使用steps而不是linear的动画计时。线性以一致的速度进行连续动画，而步骤函数在动画中停止：
.box {
background-image: repeating-linear-gradient(0deg, #333333, #333333 5px, transparent 5px, transparent 15px, #333333 15px), repeating-linear-gradient(90deg, #333333, #333333 5px, transparent 5px, transparent 15px, #333333 15px), repeating-linear-gradient(180deg, #333333, #333333 5px, transparent 5px, transparent 15px, #333333 15px), repeating-linear-gradient(270deg, #333333, #333333 5px, transparent 5px, transparent 15px, #333333 15px);
background-size: 5px calc(100% + 15px), calc(100% + 15px) 5px, 5px calc(100% + 15px), calc(100% + 15px) 5px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
animation: borderAnimation 1s infinite steps(2, end);
height: 200px;
width: 200px;
}
@keyframes borderAnimation {
from {
background-position: 0 0, -15px 0, 100% -15px, 0 100%;
}
to {
background-position: 0 -15px, 0 0, 100% 0, -15px 100%;
}
}
p {
font-family: Arial, sans-serif;
font-size: 0.8em;
}<div class="box"></div>
<p>Most of the CSS is from the generator located at <a href="https://css-tricks.com/more-control-over-css-borders-with-background-image">More Control Over CSS Borders With background-image</a>/</p>
在MDN Web文档:动画-定时功能中有各种定时函数的例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71249544
复制相关文章
相似问题
腾讯云开发者
