不确定这是否可以用css来完成,否则我会寻找一种方法用js来完成。 我想创建一个不断重复的无限流畅的动画。
这条箭头虚线应该是不断流动的,没有尽头。
[ICON] --->--->----> [ICON]
我在这里对 css 的了解并不多。
.arrows {
position: absolute;
animation: arrows 2s infinite;
animation-iteration-count: infinite;
}
@keyframes arrows {
0% {
left: 0px;
}
50% {
left: 5px;
}
80% {
left: 15px;
}
100% {
left: 0px;
}
}
<div class="arrows">-->-->--></div>
我的问题不是让动画更流畅,而是让箭头重复它们而不跳包到 0px
的起点
谢谢
最佳答案
.arrows {
position: absolute;
animation: arrows 1s infinite;
animation-iteration-count: infinite;
-webkit-animation: arrows 1s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
}
@keyframes arrows {
0% {
left: 10%;
}
100% {
left: 80%;
}
}
<div class="arrows">-->-->--></div>
关于html - Css 动画无限动画线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39995499/