css实现8字loading加载动画效果代码-html代码-BFW代码库

css实现8字loading加载动画效果代码

代码语言：html

代码描述：css实现8字loading加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  background: #222;
}

.loader-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader {
  display: inline-block;
  font-size: 90px;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  transform: translateZ(0);
}

.loader1 {
  margin-right: 0.3em;
  animation: load1 3s infinite linear;
}

.loader2 {
  margin-left: 0.3em;
  transform: rotate(-90deg);
  animation: load2 3s infinite linear;
}

@keyframes load1 {
  0% {
    opacity: 1;
    transform: rotate(90deg);
    box-shadow: 0 -0.83em 0 -0.4em #FF6B6B, 0 -0.83em 0 -0.42em #ffce6b, 0 -0.83em 0 -0.44em #ceff6b, 0 -0.83em 0 -0.46em #6bff6b, 0 -0.83em 0 -0.477em #6bffce;
  }
  2.5%,
  47.5% {
    box-shadow: 0 -0.83em 0 -0.4em #FF6B6B, 0 -0.83em 0 -0.42em #ffce6b, 0 -0.83em 0 -0.44em #ceff6b, 0 -0.83em 0 -0.46em #6bff6b, 0 -0.83em 0 -0.477em #6bffce;
  }
  5%,
  29% {
    box-shadow: 0 -0.83em 0 -0.4em #FF6B6B, -0.087em -0.825em 0 -0.42em #ffce6b, -0.173em -0.812em 0 -0.44em #ceff6b, -0.256em -0.789em 0 -0.46em #6bff6b, -0.297em -0.775em 0 -0.477em #6bffce;
  }
  10% {
    box-shadow: 0 -0.83em 0 -0.4em #FF6B6B, -0.338em -0.758em 0 -0.42em #ffce6b, -0.555em -0.617em 0 -0.44em #ceff6b, -0.671em -0.488em 0 -0.46em #6bff6b, -0.749em -0.34em 0 -0.477em #6bffce;
  }
  19% {
    box-shadow: 0 -0.83em 0 -0.4em #FF6B6B, -0.377em -0.74em 0 -0.42em #ffce6b, -0.645em -0.522em 0 -0.44em #ceff6b, -0.775em -0.297em 0 -0.46em #6bff6b, -0.82em -0.09em 0 -0.477em #6bffce;
  }
  50% {
    opacity: 1;
    transform: rotate(450deg);
    box-shadow: 0 -0.83em 0 -0.4em #FF6B6B, 0 -0.83em 0 -0.42em #ffce6b, 0 -0.83em 0 -0.44em #ceff6b, 0 -0.83em 0 -0.46em #6bff6b, 0 -0.83em 0 -0.477em #6bffce;
  }
  51%,
	100% {
    opacit.........完整代码请登录后点击上方下载按钮下载查看