纯css实现彩虹加载loading效果-html代码-BFW代码库

纯css实现彩虹加载loading效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Rainbow loader 2</title>
<style>
      .container {
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100vh;
}
.container .rainbow {
  position: relative;
  height: 16rem;
  width: 16rem;
}
.container .rainbow .line {
  position: absolute;
  transform: rotate(45deg);
}

.line:nth-child(1) {
  animation: 1.4s rotate 1.0555555556s ease-in-out infinite;
  width: 15.04rem;
  height: 15.04rem;
  top: 0.48rem;
  left: 0.48rem;
  border: 0.48rem solid transparent;
  border-radius: 50%;
  border-top-color: red;
  border-left-color: red;
}

.line:nth-child(2) {
  animation: 1.4s rotate 1.1111111111s ease-in-out infinite;
  width: 14.08rem;
  height: 14.08rem;
  top: 0.96rem;
  left: 0.96rem;
  border: 0.48rem solid transparent;
  border-radius: 50%;
  border-top-color: orange;
  border-left-color: orange;
}

.line:nth-child(3) {
  animation: 1.4s rotate 1.1666666667s ease-in-out infinite;
  width: 13.12rem;
  height: 13.12rem;
  top: 1.44rem;
  left: 1.44rem;
  border: 0.48rem solid transparent;
  border-radius: 50%;
  border-top-color: yellow;
  border-left-color: yellow;
}

.line:nth-child(4) {
  animation: 1.4s rotate 1.2222222222s ease-in-out infinite;
  width: 12.16rem;
  height: 12.16rem;
  top: 1.92rem;
  left: 1.92rem;
  border: 0.48rem solid transparent;
  border-radius: 50%;
  border-top-color: green;
  border-left-colo.........完整代码请登录后点击上方下载按钮下载查看