CSS加载动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  overflow: hidden;
  margin: 0;
  background: #000;
}

.ring {
  position: absolute;
  margin: calc(50vh - 2.5em) calc(50vw - 2.5em);
  padding: 2.5em;
  border-radius: 50%;
  transform: rotate(calc(var(--k)*1turn/var(--n))) translate(calc(.5*2.5em/var(--f)));
  background: HSLA(calc(53 + var(--p)*300), 97%, calc(87% - var(--p)*25%), calc(1 - var(--p)));
  --mask:
  	repeating-conic-gradient(from calc(-.5*(1 - 0.85*var(--p))*22.5deg),
  		red 0% calc((1 - .5*var(--p))*22.5deg),
  		transparent calc((1 - 0.85*var(--p))*22.5deg + .5deg) 22.5deg),
  	radial-gradient(
  		transparent calc(var(--q)*2.5em - 0.125em),
  		red calc(var(--q)*2.5em - 0.125em + 1px) calc(var(--q)*2.5em - 1px),
  		transparent calc(var(--q)*2.5em));
  -webkit-mask: var(--mask);
  -webkit-mask-composite: source-in;
  mask: var(--mask);
  mask-composite: intersect;
  animation: p 4s ease-in infinite, q 4s ease-in-out infinite;
  animation-delay: calc((var(--k)/var(--n) - 1)*4s);
}

@keyframes p {
  0%, 35% {
    --p: 0 ;
  }
}
@keyframes q {
  to {
    --q: 1 ;
  }
}

JavaScript

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