此方法来自转载:无限波纹
上文中的补充部分可以实现该无限轮播并实现自然衔接,没有突然跳动的效果。
下面附上我的一些代码
1、自然轮播,没有速度变化
@keyframes ripple2 {
0% {
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6), 0 0 0 20px rgba(255, 0, 0, 0.4), 0 0 0 40px rgba(255, 0, 0, 0.2);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 0, 0, 0.4), 0 0 0 40px rgba(255, 0, 0, 0.2), 0 0 0 60px rgba(255, 0, 0, 0);
}
}
.eventTip {
animation: ripple2 1s linear infinite;
position: absolute;
right: 5%;
top: 55%;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #f00;
border: 1px solid #fff;
text-align: center;
cursor: pointer;
}
2、快速开始,慢速结束,适合火灾报警之类的情况
.eventTip {
animation: ripple 1s linear infinite;
position: absolute;
right: 5%;
top: 55%;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #f00;
border: 1px solid #fff;
text-align: center;
cursor: pointer;
}
.eventTip::before, .eventTip::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
animation: ripple 3s linear infinite 1s;
}
.eventTip::after {
animation: ripple 3s linear infinite 2s;
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 7px rgba(255, 0, 0, 0.4);
}
100% {
box-shadow: 0 0 0 80px rgba(255, 0, 0, 0);
}
}