[해피CGI][cgimall] 서서히 색상이 변하는 백그라운드 애니메이션 Pulsating Marble

 

서서히 색상이 변하는 백그라운드 애니메이션입니다.

간단한 소스로 구현이 가능합니다.
 

 

HTML 구조

<div></div>

 

CSS 소스

*, *::before, *::after {

  box-sizing: border-box;

}

 

html, body {

  height: 100%;

}

 

body {

  display: grid;

  align-items: center;

  justify-items: center;

  margin: 0;

  background-color: #000;

}

 

div {

  width: 300px;

  height: 300px;

  border-radius: 50%;

  box-shadow:

    0 0 20px #fff,

    -20px 0 80px #f0f,

    20px 0 80px #0ff,

    inset 0 0 50px #fff,

    inset 50px 0 80px #f0f,

    inset -50px 0 80px #0ff,

    inset 50px 0 300px #f0f,

    inset -50px 0 300px #0ff;

  animation: pulsate 6s linear infinite;

}

 

@keyframes pulsate {

  50% {

    box-shadow:

      0 0 20px #fff,

      20px 0 80px #f0f,

      -20px 0 80px #0ff,

      inset 0 0 50px #fff,

      inset -50px 0 80px #f0f,

      inset 50px 0 80px #0ff,

      inset -50px 0 300px #f0f,

      inset 50px 0 300px #0ff;

  }

}

 

 

첨부파일을 다운로드 받거나 해당 사이트로 이동해서 전체 소스를 확인하실 수 있습니다.