HTML+CSS：波纹扩散效果

# 技术杂谈 2017-08-19 11:01 0 1,612 来源：海墨

这次给大家分享的是用html+css写出波纹扩散的效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML+CSS：波纹扩散效果</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg">

  <style type="text/css">
    body {
      margin: 0;
    }
    .wrapp {  
      position: absolute;
      top: 10%;
      left: 50%;
    }
    /************以下为具体实现************/    
    .wave {
      position: relative;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 28px;
    }
    .wave .circle {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
    }
    /* 波纹效果 */
    .wave.ripple .circle {
      width: calc(100% - 6px); /* 减去边框的大小 */
      height: calc(100% - 6px);/* 减去边框的大小 */
      border: 3px solid #fff;
    }
    .wave.ripple .circle:first-child {
      animation: circle-opacity 2s infinite;
    }
    .wave.ripple .circle:nth-child(2) {
      animation: circle-opacity 2s infinite;
      animation-delay: .3s;
    }
    .wave.ripple .circle:nth-child(3) {
      animation: circle-opacity 2s infinite;
      animation-delay: .6s;
    }
    .wave.ripple.danger {
      color: red;
    }
    .wave.ripple.danger .circle {
      border-color: red;
    }
    .wave.ripple.warnings {
        color: orange;
    }
    .wave.ripple.warnings .circle {
        border-color: orange;
    }
    /* 波动效果 */
    .wave.solid .circle{
      width: 100%;
        height: 100%;
        background: #fff;
    }
    .wave.solid .circle:first-child {
      animation: circle-opacity 2s infinite;
    }
    .wave.solid.danger {
      color: red;
    }
    .wave.solid.danger .circle{
      background: red;
    }
    .wave.solid.warnings {
      color: orange;
    }
    .wave.solid.warnings .circle{
      background: orange;
    }
    @keyframes circle-opacity{
        from {
            opacity: 1;
            transform: scale(0);
        }
        to {
            opacity: 0;
            transform: scale(1);
        }
    }
  </style>
</head>
<body>
  <div class="wrapp">
    // 涟漪扩散
    <div class="wave ripple danger">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      
      <i class="fa fa-bell"></i>
      
    </div>
    // 波纹扩散
    <div class="wave solid warnings">
      <div class="circle"></div>
      
      <i class="fa fa-bell"></i>
      
    </div>
  </div>
</body>
</html>

效果如下：