div+css实现蜜蜂采摘飞舞loading加载动画代码-html代码-BFW代码库

div+css实现蜜蜂采摘飞舞loading加载动画代码

代码语言：html

代码描述：div+css实现蜜蜂采摘飞舞loading加载动画代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
body{
    background:black;
}
.loader {
  width: 120px;
  margin:100px auto;
  aspect-ratio: 1 / 1;
  position: relative;
  container-type: size;
  transform: scaleY(-1);
  transform-style: preserve-3d;
}

.loader span {
  width: 90%;
  aspect-ratio: 10 / 2.25;
  position: absolute;
  top: 0%;
  left: 50%;
  translate: -50% 0%;
  border-radius: 50%;

  background: linear-gradient(to bottom, #ffe27a, #ffcc00, #f4b400, #d48a00);

  border: 1px solid #8c5a00;

  box-shadow:
    inset 0 2px 4px #fff2a6,
    inset 0 -3px 6px #c27a00;

  scale: 0.25;

  animation:
    travel 4.2s calc((-1 * 4.2s) * (var(--idx) / 10)) infinite linear,
    scaleAnim calc(4.2s * 0.5) calc((-1 * 4.2s) * (var(--idx) / 10)) infinite
      alternate;
}

@keyframes scaleAnim {
  0% {
    opacity: 0;
  }

  15%,
  25% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes travel {
  0%,
  5% {
    transform: translate3d(0, 0, 0);
    translate: -50% -5%;
  }

  95%,
  100% {
    transform: translate3d(0, 0, 10px);
    translate: -50% calc(100cqb - 95%);
  }
}

.bee {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  z-index: 9999;
}

.bee-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.b1 {
  animation: fly1 9s linear infinite;
}

.b2 {
  animation: fly2 10s linear infinite;
}

.b3 {
  animation: fly3 8s linear infinite;
}

.b4 {
  animation: fly4 8s linear infinite;
}

.b5 {
  animation: fly5 9.5s linear infinite;
}

.b6 {
  animation: fly6 14.2s linear infinite;
}

@keyframes fly1 {
  0% {
    transform: translate(-50px, -40px);
  }

  20% {
    transform: translate(40px, -40px);
  }

  40% {
    transform: translate(100p.........完整代码请登录后点击上方下载按钮下载查看