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;
      }
      50% {
    		border: solid #A3FFC2;		
    		opacity: 0.8;
      }
    	
    	 90% {
        transform: scale(3.2);
    		opacity: 0.2;
    		border: 3px solid #2E3CFF;
      }
      100% {
        transform: scale(3.3);
    		opacity: 0;
    		border: 1px solid #7A89FF;
      }
    }
    
    #delayed {
    	animation-delay: 1.5s;
    }
    
    #circlein {
    	width: 100px;
    	height: 100px;
    	border-radius: 50%;
    	background: #6BD6E1;
    	box-shadow: 0px -2px 15px #E0FF94;
    .........完整代码请登录后点击上方下载按钮下载查看