css实现挥点线组成的loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现挥点线组成的loading加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
.dots-bars-1 {
  width: 40px;
  height: 40px;
  --c: linear-gradient(currentColor 0 0);
  --r1: radial-gradient(farthest-side at bottom,currentColor 93%,#0000);
  --r2: radial-gradient(farthest-side at top   ,currentColor 93%,#0000);
  background: 
    var(--c) ,
    var(--r1),
    var(--r2),
    var(--c) ,  
    var(--r1),
    var(--r2),
    var(--c) ,
    var(--r1),
    var(--r2);
  background-repeat: no-repeat;
  animation: db1 1s infinite  alternate;
}

@keyframes db1 {
  0%,10% {
    background-size: 8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 90%,100% {
    background-size: 8px 100%,8px 4px, 8px 4px;
    background-position: 0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);
 }
}

.dots-bars-2 {
  width: 40px;
  height: 40px;
  --c: linear-gradient(currentColor 0 0);
  --r1: radial-gradient(farthest-side at bottom,currentColor 93%,#0000);
  --r2: radial-gradient(farthest-side at top   ,currentColor 93%,#0000);
  background: 
    var(--c) ,
    var(--r1),
    var(--r2),
    var(--c) ,  
    var(--r1),
    var(--r2),
    var(--c) ,
    var(--r1),
    var(--r2);
  background-repeat: no-repeat;
  animation: db2 1s infinite alternate;
}

@keyframes db2 {
  0%,25% {
    background-size: 8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 50% {
    background-size: 8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 75% {
    background-size: 8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 95%,100% {
    background-size: 8px 100%,8px 4px, 8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(0% - 2px),100% calc(100% + 2px);
 }
}

.dots-bars-3 {
  width: 40px;
  height: 26px;
  --c: linear-gradient(currentColor 0 0);
  background:
    var(--c) 0    100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:8px calc(100% - 4px);
  background-repeat: no-repeat;
  position: relative;
}
.dots-bars-3:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:currentColor;
  left:0;
  top:0;
  animation: 
    db3-1 1.5s  linear infinite alternate,
    db3-2 0.75s cubic-bezier(0,200,.8,200) infinite;
}


@keyframes db3-1 {
  100% {left:calc(100% - 8px)}
}

@keyframes db3-2 {
  100% {top:-0.1px}
}


.dots-bars-4 {
  width: 40px;
  height: 20px;
  --c:radial-gradient(farthest-side,currentColor 93%,#0000);
  background:
    var(--c) 0    0,
    var(--c) 50%  0,
    var(--c) 100% 0;
  background-size:8px 8px;
  background-repeat: no-repeat;
  position: relative;
  animation: db4-0 1s linear infinite alternate;
}
.dots-bars-4:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background:currentColor;
  left:0;
  top:0;
  animation: 
    db4-1 1s  linear infinite alternate,
    db4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}

@keyframes db4-0 {
  0%      {background-position: 0  100%,50% 0   ,100% 0}
  8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
  50%     {background-position: 0  0   ,50% 100%,100% 0}
  58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
  100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}

@keyframes db4-1 {
  100% {left:calc(100% - 8px)}
}

@keyframes db4-2 {
  100% {top:-0.1px}
}

.dots-bars-5 {
  width: 40px;
  height: 30px;
  --c: linear-gradient(currentColor 0 0);
  background:
    var(--c) 0    100%/8px 30px,
    var(--c) 50%  100%/8px 20px,
    var(--c) 100% 100%/8px 10px;
  background-repeat: no-repeat;
  position: relative;
  clip-path: inset(-100% 0);
}
.dots-bars-5:before{
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:currentColor;
  left:-16px;
  top:0;
  animation: 
    db5-1 2s   linear infinite,
    db5-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}

@keyframes db5-1 {
  0%   {left:-16px;transform:translateY(-8px)}
  100% {left:calc(100% + 8px);transform:translateY(22px)}
}

@keyframes db5-2 {
  100% {top:-0.1px}
}


.dots-bars-6 {
  width: 40px;
  height: 20px;
  --c:radial-gradient(farthest-side,currentColor 93%,#0000);
  background:
    var(--c) 0    0,
    var(--c) 50%  0;
  background-size:8px 8px;
  background-repeat: no-repeat;
  position: relative;
  clip-path: inset(-200% -100% 0 0);
  animation: db6-0 1.5s linear infinite;
}
.dots-bars-6:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background:currentColor;
  left:-16px;
  top:0;
  animation: 
    db6-1 1.5s linear infinite,
    db6-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
.dots-bars-6:after {
  content: "";
  position: absolute;
  inset:0 0 auto auto;
  width:8px;
  height: 8px;
  border-radius: 50%;
  background:currentColor; 
  animation: db6-3 1.5s  linear infinite;
}

@keyframes db6-0 {
  0%,30%  {background-position: 0  0   ,50% 0   }
  33%     {background-position: 0  100%,50% 0   }
  41%,63% {background-position: 0  0   ,50% 0 .........完整代码请登录后点击上方下载按钮下载查看