CSS加载动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  display: grid;
  place-content: center;
  grid-gap: .5em;
  margin: 0;
  min-height: 100vh;
  background: repeating-linear-gradient(45deg, #222 0 2px, #000 0 7px);
}

.loader {
  --f-ini: 0;
  --f-fin: 0;
  --f-hue: 0;
  position: relative;
  padding: 5em;
  border-radius: 50%;
  background: conic-gradient(from calc(var(--f-ini)*-360deg), currentcolor 0% calc(var(--f-fin)*120deg), transparent 0%);
  color: hsl(calc(var(--f-hue)*360), 100%, 75%);
  --mask: radial-gradient(transparent calc(2.25em - 1px), red 2.25em 2.75em, transparent calc(2.75em + 1px), transparent calc(3em - 1px), red 3em 3.75em, transparent calc(3.75em + 1px), transparent calc(4em - 1px), red 4em 5em, transparent calc(5em + 1px));
  -webkit-mask: var(--mask);
  mask: var(--mask);
  animation: f-ini 1s ease-out infinite, f-fin 0.5s ease-out infinite alternate, f-hue 2s linear infinite;
}
.loader:before, .loader:after {
  --i: 0;
  position: absolute;
  margin: -0.25em;
  padding: 0.25em;
  border-radius: 50%;
  transform: rotate(calc(var(--f-ini)*-360deg + var(--i)*var(--f-fin)*120deg));
  box-shadow: 0 -2.5em 1px 0em currentcolor, 0 -3.375em 1px 0.125em currentcolor, 0 -4.5em 1px 0.25em currentcolor;
  background: currentcolor;
  content: "";
}
.loader:after {
  --i: 1 ;
}
@keyframes f-ini {
  to {
    --f-ini: 1 ;
  }
}
@keyframes f-fin {
  to {
    --f-fin: 1 ;
  }
}
@keyframes f-hue {
  to {
    --f-hue: 1 ;
  }
}

JavaScript

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