css+div实现圆点长短不一致loading加载动画效果代码-html代码-BFW代码库

css+div实现圆点长短不一致loading加载动画效果代码

代码语言：html

代码描述：css+div实现圆点长短不一致loading加载动画效果代码

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

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

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

   
  
  
  
<style>
:root {
  --w: 80px;
  --single-unit: 20px;
  --dot-size: 5px;
  --speed: 1.5s;
}

.box {
  color: #B8AFE6;
  position: relative;
  display: grid;
  align-content: center;
  width: var(--w);
  height: var(--single-unit);
  border: 1px solid color-mix(in lab, currentcolor 70%, #fff);
  border-radius: calc(var(--single-unit) * .2);
  background-image: radial-gradient(circle at center, currentcolor 0 25%, #0000 0);
  background-repeat: repeat-x;
  background-size: var(--single-unit) var(--single-unit);
  animation: movebg linear infinite calc(var( --speed));
}

.dot {
  position: relative;
  left: calc(var(--single-unit) + var(--dot-size));
  border-radius: 100vmax;
  width: calc(var(--single-unit) + var(--dot-size));
  height: var(--dot-size);
  border: 1.5px solid #f9f6ef;
  background-color: #f9f6ef;
  animation: dot linear calc(var( --speed)) infinite;
  transform-origin: left;
}

@keyframes dot {
  0%, 100% .........完整代码请登录后点击上方下载按钮下载查看