纯css实现双半圆loading加载动画效果代码-html代码-BFW代码库

纯css实现双半圆loading加载动画效果代码

代码语言：html

代码描述：纯css实现双半圆loading加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
	--b: #262626;
	--w: #dcdcd2;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--b);
	animation: spin 2s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

body:before, body:after {
	content: "";
	position: absolute;
	width: 50vmin;
	height: 25vmin;
	margin-top: -25vmin;
	border-radius: 50% 50% 0% 100% / 100% 100% 0% 0%;
	background: 
		radial-gradient(circle at 50% 100%, var(--b) 1vmin, #fff0 calc(1vmin + 1px)),
		radial-gradient(circle at 50% 100%, var(--b) 1vmin, #fff0 calc(1vmin + 1px)),
		radial-gradient(circle at 50% 100%, var(--b) 1vmin, #fff0 calc(1vmin + 1px)),
		conic-gradient(from 90deg at 50% 100%, var(--b) 0 50.5%, #fff0  51.5%),		
		radial-gradient(circle at 47% 100%, var(--b) 3vmin, #fff.........完整代码请登录后点击上方下载按钮下载查看