如何解决使用javascript在webkit掩码位置动画之间等待5秒 JavaScript 版本
我正在研究图标上的 CSS 闪亮效果,到目前为止我已经使用 webkit 掩码创建了效果,下面是我的片段
.hm-instagram:before{
color: #0ED8F6;
-webkit-mask-image: linear-gradient(-75deg,rgba(14,216,246,.6) 30%,#0ED8F6 50%,.6) 70%);
-webkit-mask-size: 200%;
animation: shine 2.5s linear infinite;
}
@keyframes shine {
from { -webkit-mask-position: 150%; }
to { -webkit-mask-position: -50%; }
}
但现在我希望这个动画每 5 秒重复一次,就像每个动画循环之间的 5 秒延迟。我不确定如何使用 javascript 实现这种效果。 有什么想法吗?
解决方法
您可能在这里不需要 javascript。您只能通过 css 执行此操作。
这是您如何做到这一点。我们可以将动画持续时间计算为动画持续时间 + 动画之间的延迟,而不是将一个动画持续时间计算为动画持续时间,即在这里我们可以将动画持续时间设置为 2.5(animation) + 5(delay) = 7.5 秒。
然后您可以相应地将动画更改为仅运行前 2.5 秒。在这里,您可以在 0% 到 33% 之间设置动画(7.5 的 33% 是 2.5)。
CSS 示例
.hm-instagram:before{
color: #0ED8F6;
-webkit-mask-image: linear-gradient(-75deg,rgba(14,216,246,.6) 30%,#0ED8F6 50%,.6) 70%);
-webkit-mask-size: 200%;
animation: shine 7.5s linear infinite;
}
@keyframes shine {
0% { -webkit-mask-position: 150%; }
33% { -webkit-mask-position: -50%; }
100% { -webkit-mask-position: -50%; }
}
JavaScript 版本
您可以使用 setInterval
函数每 5 秒切换一次元素的类列表并相应地设置您的 css。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。