超好的水波纹效果

Posted 2021-11-05 mmzuo-798

html

<a class="home_user_head" href="javascript:;">
              <img src="//static.eimoney.com/diamonds/mobile/imoney_v6/img/iMoneyNewLogoColor.png">
            </a>

css:

.home_user_head {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.2);
    -webkit-border-radius: 50%;
    overflow: hidden;
    /* background-image: url(); */
    background-size: cover;
    -webkit-animation: home_user_head_ripple 0.5s linear infinite;
    animation: home_user_head_ripple 0.5s linear infinite;
  }
@keyframes home_user_head_ripple {
  0% {
      box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1), 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1);
  }
  100% {
      box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0);
  }
}

 

<a class="home_user_head" href="javascript:;">

<img src="//static.eimoney.com/diamonds/mobile/imoney_v6/img/iMoneyNewLogoColor.png">

</a>