CSS3 水波纹

css3 动画设置水波纹，效果如下图：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>test</title>
</head>
<style type="text/css">
.dot-box{height:40px;width:40px;border-radius:100%;position:relative;margin:40px;}
.dot-box:hover{cursor:pointer;}
.dot1 {
  animation: keyframes-dot1 1.5s cubic-bezier(.17,.67,.18,.41);
}
.dot2 {
  animation: keyframes-dot2 1.5s cubic-bezier(.17,.67,.18,.41);//贝塞尔曲线生成网站：http://cubic-bezier.com/
}
.dot3 {
  animation: keyframes-dot3 1.5s cubic-bezier(.17,.67,.18,.41);
}
.dot1,.dot2,.dot3{
  height: 40px;
  width: 40px;
  background: rgba(249,58,28, 1);
  color: white;
  line-height: 40px;
  text-align: center;
  border-radius: 100%;
  animation-iteration-count:infinite;
}
@keyframes keyframes-dot1 {
  0% {
    box-shadow: 0 0 0 0px rgba(238,67,40, 0.7);
  }
  100% {
    box-shadow: 0 0 0 30px rgba(238,67,40, 0);
  }
}
@keyframes keyframes-dot2 {
  0% {
    box-shadow: 0 0 0 0px rgba(238,67,40, 0.8);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(238,67,40, 0);
  }
}
@keyframes keyframes-dot3 {
  0% {
    box-shadow: 0 0 0 0px rgba(238,67,40, 0.9);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(238,67,40, 0);
  }
}

</style>
<body>
    <div class="dot-box">
        <div class="dot1">
              <div class="dot2">
                   <div class="dot3">扬州</div>
              </div>
        </div>
  </div>
</body>
</html>

 

posted @ 2018-04-11 15:28  迢迢  阅读(291)  评论(0)  编辑  收藏  举报