评论

通过box-shadow实现波纹效果

通过box-shadow实现波纹效果

@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的转变实现简单的波纹效果

代码片段:https://developers.weixin.qq.com/s/77rGNkmB7wkI

最后一次编辑于  2020-09-13  
点赞 2
收藏
评论

1 个评论

  • 小肥羊🍊
    小肥羊🍊
    2020-09-13

    赞,收藏下

    2020-09-13
    赞同
    回复
登录 后发表内容