CSS - 그라디언트, 키프레임으로 스피너만들기

그라디언트

 

그라디언트

 

- 점진적으로 색의 변화를 나타낼 수 있는 요소로 HTML 요소의 배경을 설정 할 수 있는 background 계열 CSS요소다.

gradient 요소가 가질 수 있는 속성으로는 방향, 색상, 정지점 설정 등이 있다.

 

방향을 나타내는 속성

 - 선형 그라디언트 : to top, to bottom 등

 - 방사형 그라디언트 : circle at center, ellipse at top left 등

 

색상을 설정하는 속성

- rgb 또는 rgba 로 설정

 

정지점을 설정하는 속성

- radial-gradient (red 30%, blue 70%);

 

radial-gradient

: 방사형 그라디언트로 특정 축의 중심을 기준으로 바깥으로 색이 퍼져나가는 방식으로 표현된다.

.radial {
    display: flex;  
    justify-content: center;
    align-items: center;
    color: white;
    background: radial-gradient(circle at center, red, blue, white);
    width: 50%;
    height: 100px;
}

매개변수에 circle at center가 선언되어 퍼져나가는 축이 요소의 중앙이 된다

 

 

 

linear-gradient

: 선형 그라디언트는 특정 방향으로 선형으로 뻗어나가며 색을 바꾸는 방식으로 표현된다.

.linear {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: linear-gradient(red, blue, white);
    width: 50%;
    height: 100px;
}

위에서 부터 아래로 red, blue, white 순서대로 그라디언트가 구현되었다!

 

 

키프레임으로 스피너만들기

스피너 구현

.loading{
    width: 60px;
    height: 60px;
    position: relative;
}

.circle{
    width: inherit;
    height: inherit;
    border: 5px solid #000;
    border-radius: 50%;
    border-right-color: lightgray;
    border-left-color: lighgray;
    animation: circle 1s linear infinite;
}

.loading span{
    font-size: 10px;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    font-weight: 500;
    animation: loading 1s linear infinite;
}

 

 로딩 화면을 스타일한 모습이다. 우선 크기를 지정하고 로딩 아이콘에 포지션 값을 relative로, span태그(텍스트)를 그 위에 올리기 위해 absolute로 설정해뒀다.

@keyframes circle{
    0% {transform: rotate(0);}
    100%{transform: rotate(360deg);}
}
@keyframes loading{
    0% {opacity: 0;}
    50%{opacity: 1;}
    100%{opacity: 0;}
}

 

 로딩 아이콘을 회전시키기 위해 설정해둔 keyframes 태그로 움직임을 설정해두었는데 keyframes가 가지는 속성으로 %로 된 부분은 애니메이션의 진행도를 의미하기 때문에 0% 진행됐을 떄는 circle을 0도에 맞추고 100%로 가면 갈 수록 회전을 시키도록 설정이 된 것이다. 그와 같은 원리로 loading 텍스트의 투명도 또한 애니메이션의 주기인 1초의 비율에 맞게 조절되도록 설정되어있다. 

 

해당 코드가 구현된 모습이다.