腾讯校园招聘 涟漪动画的实现

前言：

今天逛 腾讯招聘校招页面的时候，发现页面上的4个按钮在hover状态的时候，有涟漪波动效果，作为一名正在不断学习的前端来说，模仿是必须的，因此，花了点时间完成了他的页面。

思路：

他的原图

思路1：通过设置border-radius属性，将原先块级元素设置为原型，然后通过css3 动画改编boder的大小和 颜色的alpha值，不过这个时候发现，当border的宽度到一定大小的时候，内部内容会出现奇奇怪怪的问题

思路2： 不使用border，而使用box-shadow属性，给块级元素增加阴影宽度解决，解决成功。

代码

html:

<div class="tech-wap">
</div>

css:

@keyframes ripple-animation {
  0% {
     box-shadow:0 0 0 0 rgba(228, 104, 77, 1);
  }
  /* 50% {
      box-shadow: 0 0 0 5px rgba(228, 104, 77, 0.5);
  } */
  100% {
      box-shadow: 0 0 0 10px rgba(228, 34, 77, 0);
  }
}

@-webkit-keyframes ripple-animation{
  0% {
     box-shadow:0 0 0 0 rgba(228, 104, 77, 1);
  }
  50% {
      /* box-shadow: 0 0 0 5px rgba(228, 104, 77, 0.5); */
  }
  100% {
      /* border: 10px solid red; */
      box-shadow: 0 0 0 10px rgba(228, 34, 77, 0);
  }
}

body {
  background: #e3e3e3
}
.tech-wap {
  width: 86px;
  height: 86px;
  background: url('http://imgcache.qq.com/ac/www_tencent/join/images/icon_post.png') 0 0 no-repeat;  
  position: relative;
  top: 10px;
  left: 20px;
}

.tech-wap:hover:after {
    animation: ripple-animation 0.5s ease-in-out ;
    -webkit-animation: ripple-animation 0.5s ease-in-out ;
}

.tech-wap:after {
  content: ' ';
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 44px;
}

demo例子： 点击这里