키프레임 마방진 !

<!--마법진 애니메이션-->
<div class="absolute_bg_book_open"> 
<img class="magic_parts1_bg" src="./images/Magiccircle1.svg" alt="Magic circle1"> 
<img class="magic_parts2_bg" src="./images/Magiccircle2.svg" alt="Magic circle2"> 
<img class="magic_parts3_bg" src="./images/Magiccircle3.svg" alt="Magic circle3"> 
<img class="magic_parts4_bg" src="./images/Magiccircle4.svg" alt="Magic circle4"> 
<img class="magic_parts5_bg" src="./images/Magiccircle5.svg" alt="Magic circle5"> 
</div>


css ---
.absolute_bg_book_open {
	margin: 15% 0 0 -40%;
  top: 98px;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  position: absolute;
  align-items: center;
}

.absolute_bg_book_open .magic_parts1_bg {
  width: 15%;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse 120s infinite linear;
	filter: drop-shadow(10px 0px 0px rgb(0, 45, 248)) invert(0%);

}
.absolute_bg_book_open .magic_parts2_bg {
  width: 19%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse2 180s infinite linear;
	filter: drop-shadow(0px 0px 0px rgb(245, 47, 47)) invert(100%);
}
.absolute_bg_book_open .magic_parts3_bg {
  width: 26%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse 100s infinite linear;
	filter: drop-shadow(8px 0px 0px rgb(34, 132, 243)) invert(1%);
	
}
.absolute_bg_book_open .magic_parts4_bg {
  width: 53%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse2 150s infinite linear;
	filter: grayscale(40%);

}
.absolute_bg_book_open .magic_parts5_bg {
  width: 59%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  animation: spin-reverse 220s infinite linear;
	filter: grayscale(100%); 
}


@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(225deg);
  }
}
@keyframes spin-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes spin-reverse2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes setup {
  0% {
    top: 40%;
    transform: scale(1.5);
    font-size: 450%;
    opacity: 0;
    filter: blur(5px);
  }
  25% {
    top: 40%;
    transform: scale(1.5);
    font-size: 450%;
    opacity: 1;
    filter: blur(0px);
  }
  70% {
    top: 40%;
    transform: scale(1.5);
    font-size: 450%;
    opacity: 1;
    filter: blur(0px)
  }
  85% {
    top: 40%;
    transform: scale(1.5);
    font-size: 450%;
    opacity: 0;
    filter: blur(15px)
  }
  90% {
    top: 0%;
    transform: scale(0.5);
    font-size: 150%;
    opacity: 0;
    filter: blur(15px)
  }
  100% {
    top: 0;
    transform: scale(1);
    font-size: 150%;
    opacity: 1;
    filter: blur(0px)
  }
}

마법진.7z

0.04MB

 

마법진 svg.7z

0.45MB

키프레임을 이용한 마법진