@keyframes ripple {
0% {
box-shadow: 0 0 1px 0 rgba(255, 0, 0, 0.5),
0 0 1px 10vw rgba(255, 0, 0, 0.4),
0 0 1px 20vw rgba(255, 0, 0, 0.3),
0 0 1px 30vw rgba(255, 0, 0, 0.2),
0 0 1px 40vw rgba(255, 0, 0, 0.1);
}
100% {
box-shadow: 0 0 1px 10vw rgba(255, 0, 0, 0.4),
0 0 1px 20vw rgba(255, 0, 0, 0.3),
0 0 1px 30vw rgba(255, 0, 0, 0.2),
0 0 1px 40vw rgba(255, 0, 0, 0.1),
0 0 1px 50vw rgba(255, 0, 0, 0);
}
}
利用两个box-shadow的转变实现简单的波纹效果
赞,收藏下