css实现圆圈放大涟漪麦克风录音聆听中动画效果代码-html代码-BFW代码库

css实现圆圈放大涟漪麦克风录音聆听中动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现圆圈放大涟漪麦克风录音聆听中动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        @import url("https://fonts.googleapis.com/css?family=Roboto");
    @keyframes circle {
      50% {
        transform: scale(1.1);
      }
      75% {
        transform: scale(1);
      }
      100% {
        transform: scale(1.1);
      }
    }
    @keyframes outer-circle {
      0% {
        border-color: transparent;
      }
      25% {
        border-color: transparent;
      }
      75% {
        transform: scale(1.2);
        border: 1vmin solid #36c1fa;
      }
      100% {
        transform: scale(1.7);
        border: 1vmin solid #36c1fa;
        border-color: transparent;
      }
    }
    @keyframes outer-circle-2 {
      0% {
        transform: scale(1.3);
        border: 1vmin solid #36c1fa;
      }
      50% {
        transform: scale(1.7);
        border-color: transparent;
      }
      75% {
        border-color: transparent;
      }
      100% {
        border-color: transparent;
      }
    }
    @keyframes ripple {
      0% {
        box-shadow: 0 0 0 0 rgba(91, 193, 255, 0.3), 0 0 0 0vmin rgba(91, 193, 255, 0.3), 0 0 0 0vmin rgba(91, 193, 255, 0.3), 0 0 0 20vmin rgba(91, 193, 255, 0.3);
      }
      25% {
        box-shadow: 0 0 0 0 rgba(91, 193, 255, 0.3), 0 0 0 0vmin rgba(91, 193, 255, 0.3), 0 0 0 15vmin rgba(91, 193, 255, 0.3), 0 0 0 20vmin rgba(91, 193, 255, 0.3);
      }
      50% {
        box-shadow: 0 0 0 0 rgba(91, 193, 255, 0.3), 0 0 0 10vmin rgba(91, 193, 255, 0.3), 0 0 0 15vmin rgba(91, 193, 255, 0.3), 0 0 0 20vmin rgba(91, 193, 255, 0.3);
      }
      75% {
        box-shadow: 0 0 0 4vmin rgba(91, 193, 255, 0.3), 0 0 0 10vmin rgba(91, 193, 255, 0.3), 0 0 0 15vmin rgba(91, 193, 255, 0.3), 0 0 0 20vmin rgba(91, 193, 255, 0.3);
      }
      100% {
        box-shadow: 0 0 0 0vmin rgba(91, 193, 255, 0.3), 0 0 0 0vmin rgba(91, 193, 255, 0.3), 0 0 0 0vmin rgba(91, 193, 255, 0.3), 0 0 0 0vmin rgba(91, 193, 255, 0);
      }
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    
    body {
      background: linear-gradient(to bottom, #01a6ff, #0671ff);
      overflow: hidden;
    }
    
    .title {
      color: #fff;
      text-align: center;
      font-size: 5vmin;
      margin-top: 15vmin;
      font-family: "Roboto", sans-serif;
    }
    @media (max-width: 480px) and (min-width: 320px) {
 .........完整代码请登录后点击上方下载按钮下载查看