|
|
相关文章推荐
向带有CSS的虚线边框添加闪烁的动画。
问
向带有CSS的虚线边框添加闪烁的动画。
EN
EN
Stack Overflow用户
提问于
2022-02-24 09:08:22
回答 1
查看 734
关注 0
票数 0
我试着做一个动画的虚线框边框，来回移动，有点闪烁的风格。(就像下面链接中的第三个黄色边框一样。)
http://there4.io/2013/01/03/jquery-animated-borders/
然而，这是由JavaScript构建的。我无法将虚线边框更改为虚线样式。
当我寻找一个CSS解决方案，而不是谨慎地移动，我发现大多数情况下有一个平滑的动画。
例如： https://css-tricks.com/more-control-over-css-borders-with-background-image/
如何通过虚线边框实现闪烁效果？
EN
回答 1
Stack Overflow用户
发布于 2022-02-28 19:22:30
我还没有弄明白如何使它(与实际的圆圈)点，而不是虚线，但您可以使动画眨眼，而不是顺利地移动，使用
steps
而不是
linear
的动画计时。线性以一致的速度进行连续动画，而步骤函数在动画中停止：
代码语言：
javascript
运行
复制
.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%;
background-position: 0 -15px, 0 0, 100% 0, -15px 100%;
推荐文章