Android 牛轧糖加载动画-CSS

下载代码

html

css

分享到微信朋友圈

html

css

body {
  height: 100%;
  width: 100%;
  margin: 0px;
  position: absolute;
  background: black;
}

.container {
  margin: auto;
  width: 300px;
  height: 300px;
  position: relative;
  top: 45%;
  transform: translateY(-45%);
}

.ring {
  width: 300px;
  height: 300px;
  border-radius: 300px;
  position: absolute;
  mix-blend-mode: screen;
  background: transparent;
}

.red {
  border: 18px solid #d50f1c;
  animation: redanim linear 6s;
  animation-iteration-count: infinite;
}

.green {
  border: 18px solid #009927;
  animation: greenanim linear 6s;
  animation-iteration-count: infinite;
}

.blue {
  border: 18px solid #3569e1;
  animation: blueanim linear 6s;
  animation-iteration-count: infinite;
}

.yellow {
  border: 18px solid #edb40f;
  animation: yellowanim linear 6s;
  animation-iteration-count: infinite;
}

@keyframes redanim {
  0% {
    transform: rotate(0deg) scaleX(0.9) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleX(0.9) scaleY(1);
  }
  100% {
    transform: rotate(360deg) scaleX(0.9) scaleY(1);
  }
}
@keyframes greenanim {
  0% {
    transform: rotate(31deg) scaleX(0.9) scaleY(1);
  }
  25% {
    transform: rotate(121deg) scaleX(1) scaleY(0.9);
  }
  50% {
    transform: rotate(211deg) scaleX(0.9) scaleY(1);
  }
  75% {
    transform: rotate(301deg) scaleX(1) scaleY(0.9);
  }
  100% {
    transform: rotate(391deg) scaleX(0.9) scaleY(1);
  }
}
@keyframes blueanim {
  0% {
    transform: rotate(413deg) scaleX(0.9) scaleY(1);
  }
  50% {
    transform: rotate(233deg) scaleX(0.9) scaleY(1);
  }
  100% {
    transform: rotate(53deg) scaleX(0.9) scaleY(1);
  }
}
@keyframes yellowanim {
  0% {
    transform: rotate(472deg) scaleX(0.9) scaleY(1);
  }
  25% {
    transform: rotate(382deg) scaleX(1) scaleY(0.9);
  }
  50% {
    transform: rotate(292deg) scaleX(0.9) scaleY(1);
  }
  75% {
    transform: rotate(202deg) scaleX(1) scaleY(0.9);
  }
  100% {
    transform: rotate(112deg) scaleX(0.9) scaleY(1);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg