css麦克风波纹波动涟漪动画效果代码-html代码-BFW代码库

css麦克风波纹波动涟漪动画效果代码

代码语言：html

所属分类：动画

代码描述：css麦克风波纹波动涟漪动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
        background: #222032;
    }
    
    .box {
        position: absolute;
      top: 50%;
      left: 50%;
    }
    
    .object {
      display: flex;
        flex: 0 1 100%;
      justify-content: center;
      align-items: center;
      align-content: stretch;
    }
    
    .outline {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 100px solid #B5A44;
      animation: pulse 3s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
        position: absolute;
    }
    
    .button {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: #50CDDD;
        box-shadow: 0px 0px 80px #0084F9;
        position: absolute;
    }
    
    @keyframes pulse {
      0% {
        transform: scale(0);
        opacity: 0;
                border: 65px solid #0B3082;
      }
      .........完整代码请登录后点击上方下载按钮下载查看