css实现双环交错loading加载动画效果代码-html代码-BFW代码库

css实现双环交错loading加载动画效果代码

代码语言：html

代码描述：css实现双环交错loading加载动画效果代码

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

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

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

  
  
  
<style>
:root {
	--ring: #fff;
	--bg1: #555;
	--bg2: #222;
	--speed: 1s;
	--size: 0.55vmin;
	--delay: calc(var(--speed) / 24);
}

* {
	box-sizing: border-box;
	transform-style: preserve-3d;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 75% 25%, var(--bg1), var(--bg2), var(--bg2));
	perspective: 100vmin;
}

.content {
	width: 50vmin;
	height: 50vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 100vmin;
	transition: all 0.5s ease 0s;
	transform: rotateX(180deg) rotateZ(-90deg);
	filter: drop-shadow(0vmin -0.5vmin 0.125vmin #000) drop-shadow(2vmin 0vmin 0.125vmin #000);
}

.content:hover {
	transform: rotateX(225deg) rotateZ(-135deg);
}

.ring {
	--sz: 50vmin;
	--dly: calc(var(--delay) * 0);
	position: absolute;
	border: var(--size) solid var(--ring);
	border-radius: 100%;
	width: var(--sz);
	height: var(--sz);
	animation: rings var(--speed) linear var(--dly) infinite alternate-reverse;
}	

.ring:nth-child(2) {
	--sz: 48vmin;
	--dly: calc(var(--delay) * 1);
}	
.ring:nth-child(3) {
	--sz: 46vmin;
	--dly: calc(var(--delay) * 2);
}	
.ring:nth-child(4) {
	--sz: 44vmin;
	--dly: calc(var(--delay) * 3);
}
.ring:nth-child(5) {
	--sz: 42vmin;
	--dly: calc(var(--delay) * 4);
}
.ring:nth-child(6) {
	--sz: 40vmin;
	--dly: calc(var(--delay) * 5);
}
.ring:nth-child(7) {
	--sz: 38vmin;
	--dly: calc(var(--delay) * 6);
}
.ring:nth-child(8) {
	--sz: 36vmin;
	--dly: calc(var(--delay) * 7);
}
.ring:nth-child(9) {
	--sz: 34vmin;
	--dly: calc(var(--delay) * 8);
}
.ring:nth-child(10) {
	--sz: 32vmin;
	--dly: calc(var(--delay) * 9);
}
.ring:nth-child(11) {
	--sz: 30vmin;
	--dly: calc(var(--delay) * 10);
}
.ring:nth-child(12) {
	--sz: 28vmin;
	--dly: calc(var(--delay) * 11);
}
.ring:nth-child(13) {
	--sz: 26vmin;
	--dly: calc(var(--delay) * 12);
}
.ring:nth-child(14) {
	--sz: 24vmin;
	--dly: calc(var(--delay) * 13);
}
.ring:nth-child(15) {
	--sz: 22vmin;
	--dly: calc(var(--delay) * 14);
}
.ring:nth-child(16) {
	--sz: 20vmin;
	--dly: calc(var(--delay) * 15);
}
.ring:nth-child(17) {
	--sz: 18vmin;
	--dly: calc(var(--delay) * 16);
}
.ring:nth-child(18) {
	--sz: 16vmin;
	--dly: calc(var(--delay) * 17);
}
.ring:nth-child(19) {
	--sz: 14vmin.........完整代码请登录后点击上方下载按钮下载查看