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

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

代码语言：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 .........完整代码请登录后点击上方下载按钮下载查看