css扇形旋转扩大动画效果代码-html代码-BFW代码库

css扇形旋转扩大动画效果代码

代码语言：html

所属分类：动画

代码描述：css扇形旋转扩大动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #b3e5fc;
}

.mawaru {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mawaru .circle {
  position: absolute;
  background: conic-gradient(var(--color1) var(--pos), var(--color2) 0);
  border-radius: 50%;
}
.mawaru .circle:nth-child(1) {
  --color1: #50514F;
  z-index: 7;
  width: 4em;
  height: 4em;
  animation: pos 0.6s linear, color1 1.2s step-end, color2-1 1.2s step-end;
  animation-iteration-count: 2;
  animation-delay: 0.4s;
}
@keyframes color2-1 {
  50% {
    --color2: #50514F;
  }
}
.mawaru .circle:nth-child(2) {
  --color1: #F25F5C;
  z-index: 6;
  width: 8em;
  height: 8em;
  animation: pos 0.6s linear, color1 1.2s step-end, color2-2 1.2s step-end;
  animation-iteration-count: 2;
  animation-delay: 0.8s;
}
@keyframes color2-2 {
  50% {
    --color2: #F25F5C;
  }
}
.mawaru .circle:nth-child(3) {
  --color1: #FFE066;
  z-index: 5;
  width: 12em;
  height: 12em;
  animation: pos 0.6s linear, color1 1.2s step-end, color2-3 1.2s step-end;
  animation-iteration-count: 2;
  animation-delay: 1.2s;
}
@keyframes color2-3 {
  50% {
    --color2: #FFE066;
  }
}
.mawaru .circle:nth-child(4) {
  --color1: #247BA0;
  z-index: 4;
  width: 16em;
  height: 16em;
  animation: pos 0.6s linear, color1 1.2s step-end, color2-4 1.2s step-end;
  animation-iteration-count: 2;
  animation-delay: 1.6s;
}
@keyframes color2-4 {
  50% {
    --color2: #247BA0;
  }
}
.mawaru .circle:nth-child(5) {
  --color1: #70C1B3;
  z-index: 3;
  width: 20em;
  height: 20em;
  animation: pos 0.6s linear, color1 1.2s step-end, color2-5 1.2s step-end;
  animation-iteration-count: 2;
  animation-delay: 2s;
}
@keyframes color2-5 {
  50% {
    --color2: #70C1B3;
  }
}
.mawaru .circle:nth-child(6) {
  --color1: #1D35.........完整代码请登录后点击上方下载按钮下载查看