div+css实现方块旋转loading加载动画效果代码-html代码-BFW代码库

div+css实现方块旋转loading加载动画效果代码

代码语言：html

代码描述：gsap+css实现按钮点击波纹扩散动画效果代码

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

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

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


  
  
<style>
.loader {
  --speed: 1000ms;
  position: relative;
  font-size: 2.5em;
}

.loader .tile {
  width: 1em;
  height: 1em;
  -webkit-animation: var(--speed) ease infinite jump;
          animation: var(--speed) ease infinite jump;
  transform-origin: 0 100%;
  will-change: transform;
}

.loader .tile::before {
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  border-radius: 0.15em;
  background-color: currentColor;
  -webkit-animation: var(--speed) ease-out infinite spin;
          animation: var(--speed) ease-out infinite spin;
  will-change: transform;
}

.loader::after {
  content: "";
  display: block;
  width: 1.1em;
  height: 0.2em;
  background-color: #0132;
  border-radius: 60%;
  position: absolute;
  left: -0.05em;
  bottom: -0.1em;
  z-index: -1;
  -webkit-animation: var(--speed) ease-in-out infinite shadow;
          animation: var(--speed) ease-in-out infinite shadow;
  filter: blur(0.02em);
  will-change: transform filter;
}

@-webkit-keyframes jump {
  0% {
    transform: scaleY(1) translateY(0);
  }
  16% {
    transform: scaleY(0.6) translateY(0);
  }
  22% {
    transform: scaleY(1.2) translateY(-5%);
  }
  24%, 62% {
    transform: scaleY(1) translateY(-33%);
  }
  66% {
    transform: scaleY(1.2) translateY(0);
  }
  72% {
    transform: scaleY(0.8) translateY(0);
  }
  88% {
    transform: scaleY(1) translateY(0);
  }
}

@keyframes jump {
  0% {
    transform: scaleY(1) translateY(0);
  }
  16% {
    transform: scaleY(0.6) translateY(0);
  }
  22% {
    transform: scaleY(1.2) translateY(-5%);
  }
  24%, 62% {
    trans.........完整代码请登录后点击上方下载按钮下载查看