엘리멘터 배경 색상 자동으로 변경되게 만들기

엘리멘터 배경 색상 자동으로 변경되게 만들기

각 위젯마다 사용할 수 있습니다. (예: 제목(Heading)에 CSS코드 추가)

--color-1~5에는 원하는 색상 코드로 변경해서 사용하시면 됩니다.

선택한 색상을 느리게 변경되게 하고싶다면 changing-time 시간을 변경하시면 됩니다. (예: 30s)

 

아래 코드를 Custom CSS 입력란에 추가해보세요.

---

selector{
    --color-1: #FBDF8D;
    --color-2: #FFBBC2;
    --color-3: #EFB1EB;
    --color-4: #D3BEF2;
    --color-5: #ECF0D9;
    --changing-time: 15s;
}
selector{
    border-radius:200px;
    animation: background-color infinite var(--changing-time);
}
@keyframes background-color{
    0%{
        background: var(--color-1);
    }
    20%{
        background: var(--color-2);
    }
    40%{
        background: var(--color-3);
    }
    60%{
        background: var(--color-4);
    }
    80%{
        background: var(--color-5);
    }
    100%{
        background: var(--color-1);
    }
}