css gradient animation

css gradient animation

먼저 결과페이지는?

웹페이지 구현 특히, 배너작업에 배경을 transition을 사용해서 에니메이션 작업을 많이한다.

요즘은 그라디언트로 다시 표현을 많이한느것같아서, 그라디언트 에니메이션으로 구현하다가. google에서 찾아봤다.

담에는 언젠가 써보려고, 표시해둔다.

body {
    width: 100wh;
    height: 90vh;
    color: #fff;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

위의 소스가 가장 핵심적인 소스다.

css로 그라디언트를 그리고, 크기를 4배정도 키운다. 그리고 keyframes의 에니메이션으로 왔다갔다. 무한반복한다.

응용하면 무지개도 될것이다.