纯css实现粘性加载动画效果-html代码-BFW代码库

纯css实现粘性加载动画效果

代码语言：html

代码描述：纯css实现粘性加载动画效果

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


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

<style>
:root{
  --loaderSize: 98px;
}
body{
  margin:0;
}
.container{
  background: red;
  height:100%;
  width:100%;
  position: absolute;
  display: grid;
  place-items: center;
  filter: contrast(50);
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: "a"
    "b"
    "c"
    "d";
}

.loader{
  filter:blur(16px);
  height:var(--loaderSize);
  width:var(--loaderSize);
  border-radius: 50%;
  background: white;
  grid-area:a;
}

.loader::before{
  content:"";
 height:var(--loaderSize);
  width:var(--loaderSize);
  border-radius: 50%;
  background: blue;
  left:100%;
  position: absolute;
  filter:blur(16px);
  animation: gooey 2s ease infinite;
}

@keyframes gooey{
  from,to{
    left:0%;
  }
  50%{
    left:110%;
  }
}

.loader2{
  height:var(--loaderSize);
  width:var(--loaderSize);
  border-radius: 50%;
  background: white;
  position: absolute;   
  grid-area:b;
}

.loader2::before{
  content:"";
 height:var(--loaderSize);
  width:var(--loaderSize);
  border-radius: 50%;
  background: white;
  position: absolute;
  animation: gooey2 2s ease infinit.........完整代码请登录后点击上方下载按钮下载查看