css+svg实现中秋月饼加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+svg实现中秋月饼加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  


  
<style>
*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
.wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height:100vh;
  background: #03a9f4;
}
.loader{
  position: relative;
  width: 200px;
  height: 200px;
}
.loader span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform:rotate(calc(18deg * var(--i)));
}
.loader span::before{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  transform:scale(0);
  border-radius:50%;
  background: #fff;
  animation: spin 2.1s linear infinite;
  animation-delay:calc(0.1s * var(--i));
}
@keyframes spin {
  0%{
    transform:scale(0);
  }
  10%{
    transform:scale(1.2);
  }
  80%,100%{
    transform:scale(0);
  }
}
.head{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: headspin 2.1s linear infinite;
  animation-delay:-1s;
}
@keyframes headspin {
  0%{
    transform:rotate(10deg);
  }
  100%{
    transform:rotate(370deg);
  }
}

svg{
  position: absolute;
  filter:invert(1);
  bottom: -95px;
  right: 25px;
  width: 120px;
  height: 120px;
}
.monntext{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 40px;
  color:#fff;
  width: 100%;
  text-align: center;
  transform:translate(-50%,-50%);
}
.bbqone{
  position: absolute;
  bottom: -80px;
  left: -150px;
}
.bbqtwo{
  position: absolute;
  bottom: -80px;
  right: -150px;
}
.bbqthree{
  position: absolute;
  top: -145px;
  left: -65px;
}
</style>




</head>

<body >
  <div class="wrap">
  <div class="loader">
    <svg class="bbqone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 261.275 297.74375" style="enable-background:new 0 0 261.275 238.195;" xml:space="preserve"><g><path d="M103.441,45c11.399,0,20.809-8.476,22.29-19.469c-2.029-0.103-4.169-0.322-6.37-0.664   c-11.52-1.791-20.401-6.304-20.146-10.17c1.524,3.46,10.442,6.119,21.247,6.119c8.154,0,15.247-1.513,18.892-3.743   c1.663-1.017,2.609-2.183,2.609-3.423c0-3.959-9.627-7.168-21.501-7.168c-0.406,0-0.803,0.013-1.203,0.02   C115.195,2.484,109.609,0,103.441,0c-12.426,0-22.5,10.074-22.5,22.5C80.941,34.928,91.015,45,103.441,45z"/><polygon points="90.507,74.258 103.441,74.258 116.923,74.258 120.226,50.937 116.806,50.937 118.466,44.475 105.892,48.59    105.892,57.058 101.892,57.058 101.892,48.705 88.966,44.475 90.626,50.937 87.204,50.937  "/><path d="M121.445,75.594l9.041,43.775V75.128c2.244,4.597,4.556,11.881,5.866,23.343c1.816,15.891,26.214,18.969,33.649,19.534   c0.206,0.016,0.411,0.023,0.615,0.023c3.529,0,6.588-2.322,7.617-5.605h15.99c0.519,2.498,2.732,4.375,5.384,4.375   s4.865-1.877,5.384-4.375h4.107c0.519,2.498,2.732,4.375,5.384,4.375s4.865-1.877,5.384-4.375h4.107   c0.519,2.498,2.732,4.375,5.384,4.375s4.865-1.877,5.384-4.375h4.366v-2.25h-4.366c-0.519-2.498-2.732-4.375-5.384-4.375   s-4.865,1.877-5.384,4.375h-4.107c-0.519-2.498-2.732-4.375-5.384-4.375s-4.865,1.877-5.384,4.375h-4.107   c-0.519-2.498-2.732-4.375-5.384-4.375s-4.865,1.877-5.384,4.375h-15.627c0.08-4.209-3.132-7.8-7.383-8.123   c-7.935-0.603-17.36-3.424-18.994-5.654c-2.324-20.034-7.986-33.729-16.83-40.709c-4.018-3.171-7.83-4.256-10.473-4.592   L121.445,75.594z"/><path d="M105.758,225.058c0,6.83,5.537,12.363,12.363,12.363c6.828,0,12.365-5.533,12.365-12.363v-56.249   c-4.797,1.882-14.537,5.186-24.729,5.642V225.058z"/><path d="M76.395,198.705v26.353c0,6.83,5.537,12.363,12.363,12.363c6.828,0,12.365-5.533,12.365-12.363v-50.607   c-8.328-0.373-16.354-2.646-21.629-4.494c-1.446-3.674-3.381-7.154-5.773-10.328c-1.969-2.612-4.244-5.019-6.8-7.159   c0.721-2.487,0.634-5.056-0.113-7.405c2.073-1.556,3.354-4.087,3.191-6.868c-2.056-35.139,1.926-53.87,6.397-63.168v44.34   l9.317-45.111h0.082l-3.29-23.229c-3.012,0.284-7.845,1.547-12.774,6.177c-12.592,11.832-17.922,38.41-15.86,79.006   c-4.151,0.275-8.039,2.577-10.209,6.326C25.978,140.582,8.371,149.659,0,166.082L76.395,198.705z M54.169,140.2   c0.724,3.719,3.992,6.465,7.836,6.464c0.157,0,0.316-0.004,0.475-0.014c0.204-0.012,0.404-0.039,0.603-0.066   c0.291,1.039,0.416,2.127,0.305,3.224c-2.281-1.544-4.736-2.9-7.364-4.022c-2.628-1.122-5.305-1.958-7.998-2.538   C49.579,141.431,51.814,140.343,54.169,140.2z"/><path d="M200.573,164.362l-19.275,71.646l5.794,1.559l11.579-43.038h16.051v43.667h6v-43.667h16.051l11.579,43.038l5.794-1.559   l-19.275-71.646c14.718-6.292,25.268-20.436,26.404-37.167H174.17C175.306,143.925,185.856,158.07,200.573,164.362z    M220.722,167.748c2.91-0.198,5.74-0.677,8.465-1.417l6.689,24.865h-15.154V167.748z M214.722,167.748v23.447h-15.154l6.689-24.865   C208.983,167.07,211.813,167.55,214.722,167.748z"/><rect x="179.889" y="121.195" width="75.667" height="3"/><path d="M200.386,95.104c-0.883,1.096,0.44,2.852,1.318,1.758c2.455-3.053,3.527-7.471,2.717-11.805   c-0.807-4.314-3.883-6.391-2.22-11.31c0.646-1.914,1.903-3.711,3.18-4.938c0.968-0.928,0.037-3.088-0.941-2.149   c-2.44,2.344-4.283,5.684-4.681,9.703c-0.43,4.332,2.769,7.113,3.129,11.18C203.13,90.281,201.851,93.279,200.386,95.104z"/><path d="M211.319,95.104c-0.882,1.096,0.44,2.852,1.318,1.758c2.455-3.053,3.527-7.471,2.717-11.805   c-0.806-4.314-3.883-6.391-2.22-11.31c0.646-1.914,1.903-3.711,3.18-4.938c0.967-0.928,0.037-3.088-0.941-2.149   c-2.44,2.344-4.283,5.684-4.682,9.703c-0.428,4.332,2.77,7.113,3.13,11.18C214.063,90.281,212.783,93.279,211.319,95.104z"/><path d="M227.245,68.809c0.968-0.928,0.038-3.088-0.94-2.149c-2.44,2.344-4.283,5.684-4.682,9.703   c-0.429,4.332,2.768,7.113,3.129,11.18c0.243,2.738-1.037,5.736-2.502,7.561c-0.882,1.096,0.441,2.852,1.319,1.758   c2.454-3.053,3.526-7.471,2.717-11.805c-0.806-4.314-3.884-6.391-2.22-11.31C224.713,71.832,225.97,70.035,227.245,68.809z"/></g></svg>
    <svg class="bbqtwo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 75" x="0px" y="0px"><path fill="#000000" d="M314.811553,835 L313.940285,838.485071 C313.672388,839.556661 312.586519,840.208182 311.514929,839.940285 C310.443339,839.672388 309.791818,838.586519 310.059715,837.514929 L312.94808,825.96147 C311.604191,824.938339 310.527153,823.582705 309.839641,822.017244 C306.278843,823.356126 302.107738,822.593019 299.242641,819.727922 C295.337398,815.822679 295.337398,809.491029 299.242641,805.585786 C300.023689,804.804738 301.290019,804.804738 302.071068,805.585786 L312.485281,816 L327,816 C328.104569,816 329,816.895431 329,818 C329.........完整代码请登录后点击上方下载按钮下载查看