css环式加载动画

下载代码

html

css

分享到微信朋友圈

html

css

* {
  box-sizing: border-box;
}
body {
  align-items: center;
  background-color: #111;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow-x: hidden;
}
:root {
  --dot-size: 5;
  --speed: 1.5;
  --radius: 10;
  --center-size: 5;
  --rotation: -25;
  --ring-radius: 8;
  --ring-thickness: 0.75;
  --bg: #ffbfb3;
}
.loader {
  position: relative;
  height: calc(var(--dot-size) * var(--center-size) * 1px);
  width: calc(var(--dot-size) * var(--center-size) * 1px);
  -webkit-animation: turn calc(var(--speed) * 20s) calc(var(--speed) * -2s) infinite linear;
          animation: turn calc(var(--speed) * 20s) calc(var(--speed) * -2s) infinite linear;
}
.loader:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--bg);
  height: 100%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 100%;
  animation: pulse calc(var(--speed) * 1s) infinite alternate-reverse;
}
.dot {
  height: calc(var(--dot-size) * 1px);
  width: calc(var(--dot-size) * 1px);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(calc((360 / 8) * var(--index) * 1deg)) translate(0, calc(var(--dot-size) * var(--radius) * 1px));
          transform: translate(-50%, -50%) rotate(calc((360 / 8) * var(--index) * 1deg)) translate(0, calc(var(--dot-size) * var(--radius) * 1px));
}
.dot:after,
.dot:before {
  content: '';
  border-radius: 100%;
  box-sizing: border-box;
  position: absolute;
  background: none;
  top: 50%;
  left: 50%;
  -webkit-animation-duration: calc(var(--speed) * 1s);
          animation-duration: calc(var(--speed) * 1s);
  -webkit-animation-delay: calc((8 - var(--index)) * (var(--speed) / 8) * -1s);
          animation-delay: calc((8 - var(--index)) * (var(--speed) / 8) * -1s);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-transform: translate(-50%, -50%) scale(var(--scale));
          transform: translate(-50%, -50%) scale(var(--scale));
}
.dot:after {
  --dot-size: 5;
  --ring-thickness: 0.75;
  --ring-radius: 8;
  --scale: 0;
  -webkit-animation-name: load;
          animation-name: load;
  border: calc(var(--dot-size) * var(--ring-thickness) * 1px) solid var(--bg);
  height: calc(var(--dot-size) * var(--ring-radius) * 1px);
  width: calc(var(--dot-size) * var(--ring-radius) * 1px);
}
.dot:before {
  --scale: 1;
  -webkit-animation-name: fade;
          animation-name: fade;
  background: var(--bg);
  height: 100%;
  width: 100%;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  85%, 100% {
    opacity: 0.2;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  85%, 100% {
    opacity: 0.2;
  }
}
@-webkit-keyframes load {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  85%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes load {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  85%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes pulse {
  to {
    opacity: 0.35;
  }
}
@keyframes pulse {
  to {
    opacity: 0.35;
  }
}
@-webkit-keyframes turn {
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes turn {
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

JavaScript

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