css实现未来风格的线圈转动loading加载动画效果代码-html代码-BFW代码库

css实现未来风格的线圈转动loading加载动画效果代码

代码语言：html

代码描述：css实现未来风格的线圈转动loading加载动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root{
        	--red:#ff3420;
        	--yellow:#ffea29;
        	--blue:#1FD3B7;
        	--size:150px;
        	}
        	

        
        body{
        	display:flex;
        	height:100vh;
        	width:100%;
        	align-items:center;
        	justify-content:center;
        	padding:0;
        	margin:0;
        	background:#02143c;
        }
        
        .container{
        	height:100%;
        	width:100%;
        	display:flex;
        	align-items:center;
        	justify-content:center;
        }
        
        body, 
        .container{
        	position:relative;
        }
        	
        .ring-frame,
        .disc-frame{
        	height:100%;
        	width:100%;
        	display:flex;
        	align-items:center;
        	justify-content:center;
        }
        
        .ring-frame,
        .disc-frame,
        .ring,
        .disc{
        	position:absolute;
        }
        	
        .ring{
        	border:2px solid rgba(255,35,49,0.1);
        	border-left:2px solid var(--red);
        	border-right:2px solid var(--red);
        	border-radius:50%;
        	display:flex;	
        	z-index:1;
        }
        
        .ring:nth-child(1){
        	animation: spin 1s linear infinite;
        }
        
        .ring:nth-child(2){
        	animation: spinner 1.25s linear infinite;
        }
        
        .ring:nth-child(3){
        	animation: spin 1.5s linear infinite;
        }
        
        .disc{
        	height:var(--size);
        	width:var(--size);
        	border:2px solid var(--red);
        	opacity:.9;
        	border-radius:50%;
        	animation:rotate 3s linear infinite;
        	
        }
        
        .loading{
        	display:block;
      .........完整代码请登录后点击上方下载按钮下载查看