svg+css实现立体方块变色loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现立体方块变色loading加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
#preloader {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: #ddd;
}

.preloader-container {
  width: 400px;
}

.preloader-container svg {
  width: 100%;
  max-width: 100%;
  translate: 0 30%;
  transition: cubic-bezier(.17,.67,.53,.98) 400ms;
  transition-delay: 200ms; 
}

#preloader #logo-text {
  opacity: 0;
  translate: 0 10px;
  transition: cubic-bezier(.17,.67,.53,.98) 1000ms;
  transition-delay: 850ms;
}

#preloader.loaded #logo-text {
  opacity: 1;
  translate: 0 0px;
}

#preloader.loaded .preloader-container svg {
  translate: 0 0;
}

#preloader {
  opacity: 1;
   transition: cubic-bezier(.17,.67,.53,.98) 400ms;
  transition-delay: 1850ms;
}

#preloader.loaded {
  opacity: 0;
  pointer-events: none;
}
</style>



</head>

<body >
  <div id="preloader">
<div class="preloader-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.01 110.86"><title>dynamic-tile-logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="logo-text"><path d="M21.26,80.85c2.32,0,3.6.43,4.16,1.4a7.1,7.1,0,0,1,.52,3.33v7.25c0,2-.43,3-1.52,3.62-.74.41-1.37.48-3.71.48H.37V80.85Zm.8,3.19H4.5v9.54H22.06Z" style="fill:#424143"/><polygon points="33.4 80.85 43.35 88.65 53.06 80.85 58.59 80.85 45.14 91.36 45.14 96.93 41.03 96.93 41.03 91.36 27.56 80.85 33.4 80.85" style="fill:#424143"/><polygon points="67.69 80.85 84.39 93.82 84.39 80.85 88.52 80.85 88.52 96.93 82.2 96.93 65.78 84.23 65.78 96.93 61.67 96.93 61.67 80.85 67.69 80.85" style="fill:#424143"/><path d="M105.23,80.66l4.73,0,13.88,16.32h-5l-2.9-3.55h-17l-2.61,3.55H91.54Zm7.92,9.54-5.84-6.89-5.66,6.81Z" style="fill:#424143"/><polygon points="132.19 80.85 142.02 93.5 151.85 80.85 157.14 80.85 157.14 96.93 153.51 96.93 153.51 84.72 144.05 96.93 140.38 96.93 130.55 84.96 130.84 96.93 126.86 96.93 126.86 80.85 132.19 80.85" style="fill:#424143"/><rect x="162.61" y="80.85" width="4.1" height="16.08" style="fill:#424143"/><path d="M196,84H175.43v9.39H196v3.5H175.87c-1.91,0-3.21-.58-3.86-1.76a7.41,7.41,0,0,1-.66-3.58v-7c0-1.65.39-2.63,1.16-3.07a8.1,8.1,0,0,1,3.77-.63H196Z" style="fill:#424143"/><polygon points="6.22 104.8 3.49 104.8 3.49 110.66 2.86 110.66 2.86 104.8 0 104.8 0 104.26 6.22 104.26 6.22 104.8" style="fill:#424143"/><rect x="13.53" y="104.26" width="0.63" height="6.39" style="fill:#424143"/><polygon points="23.91 110.12 28.56 110.12 28.56 110.66 23.27 110.66 23.27 104.26 23.91 104.26 23.91 110.12" style="fill:#424143"/><polygon points="42.2 104.8 36.67 104.8 36.67 107.08 41.77 107.08 41.77 107.63 36.67 107.63 36.67 110.11 42.49 110.11 42.49 110.66 36.03 110.66 36.03 104.26 42.2 104.26 42.2 104.8" style="fill:#424143"/><path d="M62.57,110.65a2.48,2.48,0,0,1-1.74-.68,3.23,3.23,0,0,1-2.32.88c-1.35,0-2.39-.76-2.39-1.77a1.73,1.73,0,0,1,1.19-1.52,5.21,5.21,0,0,1,.81-.33,2,2,0,0,1-.69-1.36A1.43,1.43,0,0,1,59,104.51a1.38,1.38,0,0,1,.89,2.53,3.76,3.76,0,0,1-.81.41c.29.31.38.39.84.86s.57.58.73.72l.2.2a4,4,0,0,0,.7-1.82h.53a4.38,4.38,0,0,1-.84,2.16,2.57,2.57,0,0,0,1.35.58ZM56.77,109c0,.77.77,1.34,1.8,1.34a2.54,2.54,0,0,0,1.87-.75l-.22-.2L58.78,108l-.28-.3c-1.28.4-1.73.75-1.73,1.38M58.89,107c.75-.3,1-.61,1-1.11A.85.85,0,0,0,59,105a.88.88,0,0,0-1,.85c0,.29.17.6.65,1.16l.2-.08" style="fill:#424143"/><path d="M85.13,105.62a1.8,1.8,0,0,0-1.07-.83,4.8,4.8,0,0,0-1.33-.16c-1.53,0-2.25.41-2.25,1.27,0,.64.34.86,1.48,1l1.21.12a5.3,5.3,0,0,1,2,.43,1.49,1.49,0,0,1,.8,1.35c0,1.28-1.22,2.09-3.15,2.09a4.27,4.27,0,0,1-2.91-.82,2.2,2.2,0,0,1-.6-.93l.65-.26A1.86,1.86,0,0,0,81.06,110a4.54,4.54,0,0,0,1.78.31c1.49,0,2.46-.57,2.46-1.48a1,1,0,0,0-.62-.92,6.66,6.66,0,0,0-1.57-.29l-1.23-.11c-1.48-.14-2.1-.61-2.1-1.56,0-1.21,1-1.88,2.91-1.88a4.37,4.37,0,0,1,2.37.55,2.44,2.44,0,0,1,.7.7Z" style="fill:#424143"/><polygon points="99.15 104.8 96.42 104.8 96.42 110.66 95.79 110.66 95.79 104.8 92.93 104.8 92.93 104.26 99.15 104.26 99.15 104.8" style="fill:#424143"/><path d="M110.16,110.86c-2.26,0-3.85-1.4-3.85-3.4s1.59-3.41,3.85-3.41,3.84,1.42,3.84,3.41-1.58,3.4-3.84,3.4m0-6.23a2.84,2.84,0,1,0,3.11,2.83,2.82,2.82,0,0,0-3.11-2.83" style="fill:#424143"/><polygon points="128.74 110.66 128.1 110.66 122.68 105.1 122.68 110.66 122.05 110.66 122.05 104.26 122.68 104.26 128.1 109.83 128.1 104.26 128.74 104.26 128.........完整代码请登录后点击上方下载按钮下载查看